Android 4.4 / Backspace bug with certain masks

[burakicel]

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]

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

[lukepfeiffer10]

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

[lukepfeiffer10]

@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]

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]

@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]

@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]

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]

@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]

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]

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

Video attached.

bug.zip

[diogoorikassa]

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

[jdnichollsc]

@burakicel Guys, Does this mistake happen with Crosswalk?