search

insin / react-maskedinput

Masked <input/> React component
http://insin.github.io/react-maskedinput/
MIT License
730 stars 197 forks source link

Mobile: Can not enter any digits on Android Firefox #95

Open blipntime opened 7 years ago

blipntime commented 7 years ago

I can not enter any digit on Android Firefox. On Windows Edge, I can only enter first character (4, 5, etc.). Screenshot for Windows mobile:

window mobile

Environment: node v4.8.0, npm 3.10.10. Current create-react-app. Code from README.md.

Note: the live demo (http://insin.github.io/react-maskedinput/) works on Windows, it does NOT on Android Firefox.

deldreth commented 7 years ago

I've been noticing this issue within the past 24 hours based on user feedback. The issue I'm seeing is also not specific to numeric masked fields. Any alphanumeric characters are not working.

I cannot reproduce the issue in Android Firefox.

Safari Desktop 10.1 (12603.1.30.0.34) does not appear to work.

Android Chrome Mobile (58.0.3029.83) does not work with http://insin.github.io/react-maskedinput

olwen1987 commented 7 years ago

This is because of HTMLTextAreaElement.setSelectionRange code where we take the caretPosition

https://github.com/angular-ui/ui-mask/pull/191/commits/f830e9b785274da1fdb28c8e5600f70906aebf39?diff=split#diff-26a6847cb7abea6adbbdc04fc7c6ec14R12

Similar issues..

We need to change the caretPosition from selectionStart to selectionEnd

padsbanger commented 7 years ago

Any progress on this issue ? I had to disable all masked inputs for mobile users :/

spherop commented 7 years ago

This is what worked for me. Only tested so far on browser stack. No warrantees but may help:

 _keyPressPropName() {
    // if (typeof navigator !== 'undefined') {
    //   return navigator.userAgent.match(/Android/i) ? 'onBeforeInput' : 'onKeyPress';
    // }
    return 'onKeyPress';
 }