search

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
390 stars 258 forks source link

Android 4.4 / Backspace bug with certain masks #123

Open burakicel opened 8 years ago

burakicel commented 8 years ago

Hey, I am using UI mask on Android 4.4 (Kitkat) in an Ionic project.

Mask I am trying to run is "+1 (?9?9?9) ?9?9?9-?9?9?9?9" for the phone number. I did this because I want the country code to be pre-populated. What I noticed is that if I try backspacing on androids native keyboard when there is no input, I will get additional "1"s appended to my phone number. While all I pressed was the backspace button.

I confirmed the bug by also running the demo page on a Kitkat browser.

lukepfeiffer10 commented 8 years ago

Trying to look into this issue but I'm having issues getting an emulator running.

lukepfeiffer10 commented 8 years ago

@burakicel I'm working on getting a BrowserStack account up and running so that I can try and debug this issue.

lukepfeiffer10 commented 8 years ago

@burakicel I am trying to reproduce this bug using BrowserStack and a Galaxy S5 which is running 4.4 and not able to reproduce your issue. Are you sure you are using the latest version of the library? If so, is there any more information you can add to this that can help me replicate what you are seeing?

burakicel commented 8 years ago

Hmm. When I noticed this bug, I was using an Android 4.4.2 (Nexus 7) emulator. As I mentioned, this bug also happened when I tried to run the demo page (https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html) on the browser app. I am not sure if the demo page is using the latest version of UIMask. I will inspect this issue after work and hopefully provide some screenshots for you.

erinzobitz commented 8 years ago

@lukepfeiffer10 I'm experiencing the same issue and you're able to reproduce it using the demo page. @burakicel is there any work around that you've found?

lukepfeiffer10 commented 8 years ago

@erinzobitz I was never able to reproduce this issue. If you could include more information or a short video/gif of what is happening I might be able to help.

erinzobitz commented 8 years ago

Ok @lukepfeiffer10, video attached! Thanks for checking it out. I'm just on the demo page, using a Samsung Galaxy S4 with Android 4.4.2. You can see the cursor jumping around so you can put numbers in the order you intend, as well as backspace issues.

Video.MOV.zip

lukepfeiffer10 commented 8 years ago

@erinzobitz First thing I would try is removing the input event from the eventsToHandle array (for android browsers). I meant to put a code snippet in the readme explaining this but haven't done that yet. It might be time for me to do that in the library for android browsers...

Code snippet

app.config(['uiMask.ConfigProvider', function(uiMaskConfigProvider) {
  if (android)
      uiMaskConfigProvider.eventsToHandle(['keyup', 'click', 'focus']);
}
erinzobitz commented 8 years ago

You rock @lukepfeiffer10! This fixed the issue. Backspace gets stuck at the dashes and you have to move the cursor to get where you want, but that seems to be another known issue.

ivanovevgeny commented 7 years ago

Hi! Have the same issue with Android (6.0, 4.4.4).

Video attached.

bug.zip

diogoorikassa commented 7 years ago

I have observed this issue in Samsung devices (Note 4 and S7 Edge) with Samsung native keyboard, in others masks too.

jdnichollsc commented 7 years ago

@burakicel Guys, Does this mistake happen with Crosswalk?