angular-ui / ui-mask

Mask on an input field so the user can only type pre-determined pattern
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
MIT License
391 stars 258 forks source link

Issue with Chrome & Firefox on Samsung devices #222

Open dimeloper opened 7 years ago

dimeloper commented 7 years ago

In our webapp we are using a pattern like "?9?9.?9?9.?9?9?9?" for a date field. When the Predictive Text is enabled for the Samsung device's keyboard the field behaves in a really strange way.

Chrome (v58): You type the 1st digit and everything is ok. You type the 2nd digit, everything remains ok. But when you type the 3rd digit the 2nd digit is getting copied. And then you type the 5th digit, the 3rd and the 4th are getting copied.

Firefox (v53.0.2) The input field is totally broken.

On the other hand, when the Predictive Text is disabled (from the device's settings), everything is back to normal.

Ofc I tried to turn autocomplete off, autocapitalize=off and spellcheck to false but obviously the Samsung's Predictive text did not really care.

Has anybody experienced this behaviour before? Any clues on what might cause it/solve it?

dimeloper commented 7 years ago

Ok for whoever encounters this issue, for me this solution worked:

Injected into the input elements the following: autocomplete="off" autocorrect="off" pattern-model spellcheck="off"

"pattern-model" is a custom angular directive see -> http://stackoverflow.com/a/40686169/6999437