More funky placeholder behavior

[angular-ui]

More funky placeholder behavior

[dimrsilva]

The ui-mask-placeholder attr can be used to maintain the original placeholder behavior.

That said, from the three examples, only on third one is used correctly.

You should use:

<input ui-mask="[phone]" ng-model="x" placeholder="[phone]" ui-mask-placeholder/>
<input ui-mask="99/99/9999" ng-model="y" placeholder="MM/DD/YYYY" ui-mask-placeholder/>
<input ui-mask="[phone]" ng-model="z" placeholder="Phone number" ui-mask-placeholder/>

Anyway, your third example should work. So, there is a bug with empty placeholders.

On this plunk you can see a (not so good) workaround for this problem: http://plnkr.co/edit/gxQ2LJgQQuAjY9wtNvx8?p=preview

I'll try to fix this and do another PR asap.

[wiltzius]

Thanks for following up!

Sorry if I seem thick, but what is the difference between the version you posted and the version I posted for the first two examples? I think they are the same? I copy/pasted wrong when I first posted this issue and immediately edited to correct it, so perhaps you caught the first incorrect version -- sorry about that.

I'll look at the plunker now.

[wiltzius]

Ah, I see now in the plunker that I am indeed using the directive wrong entirely.

I copied the example from demo.html, which does not specify anything for the ui-mask-placeholder attribute it just includes it empty. Is that not a valid way to use it? In which case, I would be happy to update demo.html.

Lastly, in that plunker even with the workarounds it appears that neither of the phone number examples work quite right. Try typing "1234567890" -- by the time you're done typing it will read "[phone]". Or try typing "650" -- by that point it will suddenly switch to "605" instead. Very mysterious!

If more examples or test cases or something would help, happy to provide; or else let me know if there's some other way I can help. Thanks!

[dimrsilva]

My mistake, I just copy/paste and forgot to edit:

<input ui-mask="[phone]" ng-model="x" ui-mask-placeholder="[phone]"/>
<input ui-mask="99/99/9999" ng-model="y" ui-mask-placeholder="MM/DD/YYYY"/>
<input ui-mask="[phone]" ng-model="z" placeholder="Phone number" ui-mask-placeholder/>

[dimrsilva]

I got that too, there is a bug when you type the same key as on placeholder.

[wiltzius]

awesome, thank you for the corrections and for the fixes. It looks like now the latter two examples work, but the first one still has the issue where typing the same key as what's in the placeholder messes it up. I'll open a separate issue for that.

[SimSot]

@dimrsilva good day man, your workaround...if the mask is [phone], I can't enter the digit 5. Please help.