Mask not working properly after update to this last version on Android

[Seltius]

I´m using this inputMask query: jQuery("InputElement").inputmask("99999999 9 ***");

This behavior only happens in an Android device (Samsung SM-T550 with android version: 7.1.1), so to explain it: When I try to write any input in this mask for example "1", he writes the number 1 on input and duplicate it, but does not show the duplicated value. And when you write again anything he writes this hidden value and then add a the new pressed value and again he leaves the last value that was written in a hidden state.

Video that demonstrates this bug: https://ufile.io/2n6oc

Can you try to fix it ASAP ?? :)

Best regards, José Dantas

[RobinHerbots]

@Seltius ,

Which version do you use?

[Seltius]

Right now I´m using Version: 4.0.0-beta.66, I only use jquery.inputmask.bundle.js for the masking process.

I saw that you released an update last week, I already tested it with this new version and the problem remains.

[RobinHerbots]

@Seltius ,

Can you create a jsfiddle to test against.

[Seltius]

https://jsfiddle.net/421xgfbk/ Here is the fiddle, dunno why but can´t load your lib on fiddle can you help ? But that´s the use case.

[Seltius]

When I try to load your .js bundle on fiddle I receive this error: Refused to execute script from 'https://github.com/RobinHerbots/Inputmask/blob/4.x/dist/jquery.inputmask.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[RobinHerbots]

@Seltius ,

Updated jsfiddle. I can't add a resource url anymore in jsfiddle, ... so added it via a script tag.

https://jsfiddle.net/robinherbots/npw3ek7q/2/

[RobinHerbots]

@Seltius ,

Which keyboard do you use on the samsung device?

[RobinHerbots]

@Seltius ,

Try with this https://jsfiddle.net/robinherbots/npw3ek7q/6/

It is the predictivetext which is enabled by default

[Seltius]

Hello @RobinHerbots, First of all, thank you for the fast reply. Answering to your questions, I´m using the default samsung keyboard layout.

I´m not using your CSS file, I tested this JsFiddle and it works well now. But I´m having a visual issue.

Check this print: https://ibb.co/b3ex7o

What should I do to fix this ?

Best regards, José Dantas

[Seltius]

It´s fixed what I reported above. I used this: div.im-colormask > div { display: none; }

and changed one line of code: (!0 !== opts.colorMask && initializeColorMask(el), el.type = "password") -> I changed this to text

Thank you very much for your help @RobinHerbots

[RobinHerbots]

@Seltius ,

And does it work with those changes you made???

Including the inputmask.css fixes the visual.

[Seltius]

Hello @RobinHerbots I´m still testing, I´ll give you feedback later.

[Seltius]

Okey, it´s working with the fixes I´ve made.

Styling: div.im-colormask > div { display: none; }

Lib code: (!0 !== opts.colorMask && initializeColorMask(el), el.type = "password") -> Change password to to text on the Bundle file.

Can you give me an example on how to extend Aliases out of your Bundle file ? From another .js ?

[RobinHerbots]

@Seltius ,

It is not logic that those changes work, as you are reverting to normal behavior.
Anyway for the aliases https://github.com/RobinHerbots/Inputmask#set-defaults

[Seltius]

Hey @RobinHerbots yes you´re right, I wasn´t thinking right.... For some reason sometimes the mask works properly, that´s why I was in mistake.

Are you sure this is and issue related to the predictivetext ?

Best regards, José Dantas

[RobinHerbots]

@Seltius ,

Yes I am sure it is the predictive text behavior. Disable predictive text on your phone an try with the initial mask. It will also behave normal. The only workaround, currently is to make the input type password which disables it by default.

[Seltius]

Good morning @RobinHerbots, I´ve fixed this problem doing this: https://jsfiddle.net/npw3ek7q/30/

So you start the field with type="password", and then after DOM load you just need to change the type to text.

I´ve made all the tests and it works, when you assign type password by default to a field and after load you change this fields type, the predictive text will not be activated in this field.

I think it is a better solution, because you can maintain the html structure, and there´re no need to use any other "tricks".

What do you think ?

Best regards, José Dantas

[RobinHerbots]

@Seltius ,

That trick seems to work!! That is fantastic!! You are a hero ;-)

DId you tried this on several mobile devices yet?

[Seltius]

Hey hey @RobinHerbots, I only tested it on Samsung SM-T550, this is the only android device that I´ve for tests.

You´re welcome ;)

This took a lot of time and investigation, I really needed it fixed... Fix it in your lib, your fans will love it ;)

I already gave you a start in your project keep the good work 🥇

Best Regards, José Dantas

[RobinHerbots]

@Seltius ,

I tried the fiddle on browserstack on some other devices and that seems to fail.

[RobinHerbots]

jsfiddle to test against

https://jsfiddle.net/npw3ek7q/47/

[Seltius]

@RobinHerbots do you want me to test this fiddle in my tablet ?

[Seltius]

On that fiddle you sent, you´re not load your lib right ?

[RobinHerbots]

@Seltius ,

Yes, the latest jsfiddle is only about disabling predictive text

[Seltius]

@RobinHerbots try it with your lib, if you want I cant record a demo with my tablet.

[RobinHerbots]

@Seltius ,

On my real phone and tablet it works, but not in emulation, ... strange. Can someone else also test?

[Seltius]

@RobinHerbots do you want me to do anything ?

[RobinHerbots]

@Seltius ,

I need more test cases, or why doesn't it work when testing on browserstack

[RobinHerbots]

Samsung s7 Android version 8.1 Samsung keyboard => failed

[Seltius]

@RobinHerbots can we say the buggie behavior is in certain android keyboard types ? Older keyboards ?

[RobinHerbots]

@Seltius ,

Yes, the trick only seem to work on older versions of android. So the current solution by adding a div which mimics an input is better. (not perfect)

[ShamanFromSiberia]

On a Sony keyboard the bug persists as well, Changing type to password doesn't help. Maybe it is possible to check what device is being used and if it's something powered by Android then turn the mask off, but keep it on iOS and desktops?

Update: Here is temporary fix that turns Inputmask off on Android devices

jQuery(document).ready(function(){
    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; 
    if(!isAndroid) { // checking if it is not Android
      jQuery(selector).inputmask({ // if not Android then do something with Inputmask
        mask: "+7 (999) 999-99-99"
      });
    }
});  

[alexisdiel]

@RobinHerbots ,

I got some strange behavior.... after enter the field, if I start by pressing backspace before start input any data, works fine

[alexisdiel]

Hi @RobinHerbots ,

I did some tests here, and I found an if statement that when I comment, works perfectly.

file js/inputmask.js lines 1912 to 1919.

[knoxcard]

@Seltius - Great Fix! I created a jQuery fix that loads as a footer function (essentially run this after you declare your last inputmask() field)...

$('input').each(function() {
    if($(this).attr('type') !== 'password')
        return
        // most input fields are type="text" default -> if data-type attribute isn't defined
    if(!$(this).attr('data-type')) {
        $(this).attr('type', 'text')
        return
    }
    $(this).attr('type', $(this).attr('data-type'))
})

Notice the data-type attribute. Simply set that as follows. If you do not declare a data-type attribute, it will be set to text by default.

For example, an input type="tel" field would be declared as...

<input type="password" data-type="tel" name="cell" autocomplete="cell" />

input type="text", don't declare data-type

<input type="password" name="full_name" autocomplete="name" />