Inputmask: Chrome autofill does not work with Inputmask

[yhosun]

Hello,

I have an autofil setup for credit card number in my Chrome, but the autofill dropdown does not show when the Inputmask is initialized:

• Test case: https://jsfiddle.net/uxmonn2z/2/
• File included: https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js

It works as expected once the Inputmask initialization is commented out:

Thank you.

[mcshooter]

Has this issue bene resolved? It seems to be working for non-alphabetical placeholders, but not for something with alphabetical placeholders yet.

[EricTousignant]

I found a workaround and possible reason why Google Autofill stops working.
See the fiddle: https://jsfiddle.net/uxmonn2z/5/

If you set the placeholder to '' (empty string) it works again.
Any other placeholder (even the default one) prevents the Autofill from working.
This is probably because the "placeholder" is actually a "value", which would explain the issue.

As far as solutions, maybe hiding the "placeholder" (emptying the value) on:focus might work.

[RobinHerbots]

@EricTousignant ,

Thx for your findings and feedback.

[Romanchuk]

Is it going to be fixed?
There is relative issue with iOs bank card number scanner, it doesn't fill field with mask

[z1haze]

👍 to fix this please. Have been integrating this into a project, but the behavior of autofill killed it :(

[xeontem]

Have the same issue. Autofilling payment form doesn't work correctly. Some digits from card number disappear.

[RobinHerbots]

@yhosun , @mcshooter , @EricTousignant , @Romanchuk , @z1haze , @xeontem ,

Have a look at https://jsfiddle.net/y9qfjxnp/2/ (using inputmask 5.x)

I pushed a fix in inputmask 5.x. In older versions you can pass the showMaskOnFocus: false option

[z1haze]

Same when using it as a jquery plugin?

Can you push this version to npm, i will test it today.

[RobinHerbots]

@z1haze ,

Version 5.0.0-beta.152

The numeric alias is still in development in this branch.

[alexeisorokin11]

@RobinHerbots
Why have you closed PR if it still doesn't work with the latest inputmask (5.0.0-beta.163). I'm trying to use autofilling and the masked fields aren't being filled as they should.

[RobinHerbots]

@alexeisorokin11 ,

Have you tried the fiddle in https://github.com/RobinHerbots/Inputmask/issues/1330#issuecomment-492160638.

[z1haze]

@RobinHerbots I actually pulled down the exact version you mentioned before Version 5.0.0-beta.152 but it still did not work for me. I ended up having to go with another library that didnt have the issue. Good luck on this!

[RobinHerbots]

@z1haze ,

Hmm, when I try the fiddle I get the popup to autofill with my creditcard number.

I cannot fix things when I don't get feedback.

[Romanchuk]

Fiddle example is not working either, exp field is not autofilling

[RobinHerbots]

@Romanchuk ,

Ok, in which browser and os. I tried Chrome on linux and windows 10. Both fields autofill.

[Romanchuk]

Testing on https://jsfiddle.net/y9qfjxnp/2/

Windows
Chome 74

http://joxi.ru/82QZdRRswpjVvA
http://joxi.ru/Vm660ggf4bDR5m

Expiration filled, but card number not.
I noticed that autofill works only for field that was in focus.

[alexeisorokin11]

@RobinHerbots
Of course I tried #1330 (comment).
Oh. There is important moment. For some reason autofilling works only for field which is in focus. For example, I am picking the card number field and waiting for autofilling of epired date. But only card field is autofilled because it is being in focus at the moment.

[RobinHerbots]

@alexeisorokin11 , @Romanchuk ,

It seems that focus & value is key.

See: https://jsfiddle.net/0w97egmx/

[RobinHerbots]

@alexeisorokin11 , @Romanchuk ,

No that doesn't work either.... I need some further testing

[RobinHerbots]

@alexeisorokin11 , @Romanchuk ,

Ok, google doesn"t let me verify my credit card again, ... card cannot be verified right now

[RobinHerbots]

@alexeisorokin11 , @Romanchuk,

Can you have a try with https://jsfiddle.net/1wyq69fs/3/

[Romanchuk]

@RobinHerbots just tried, still the same behaviour (

[RobinHerbots]

Tried Linux with Chrome 75.0.3770.80
A new fiddle for reference https://jsfiddle.net/wtvp2szo/

And the cc-exp doesn"t get filled.

[RobinHerbots]

What is this? I tried on another linux with the same Chrome and it works!! ?

Maybe some caching? I need to verify again at home.

[Romanchuk]

Window, Chrome 74
Android, Chrome 74

Both works! But i dont see mask displaying, not sure it works correctly.

I have removed duplication of id of elements
https://jsfiddle.net/3myx21ob/
There was problem in android until i removed it

[Romanchuk]

@RobinHerbots Question: is there any possibility to adjust card expiration date to MM/YY mask?
In this version it autocompletes as 11/2021 even if you set mask to MM/YY. MM/YY mask is more common format to display expiration dates.

[alexeisorokin11]

@RobinHerbots we're talking about this case
https://jsfiddle.net/w53sjf9d/
https://monosnap.com/file/8dBDqqkwDIDlkJBcu6dv1M3ZzzQ0I8
I'm not sure it's filling correctly either but
I guess such feature needs to be implemented separately.

[RobinHerbots]

@Romanchuk , @alexeisorokin11 ,

No that fiddle does not use the mask. The ids in mask do not match anything.

The cc-exp masking can be changed but that has to be implemented to take the correct part of the year part.

https://jsfiddle.net/jyne81sx/1/

Windows = ok
Linux (Ubuntu 19.04) = mixed (at home it doesn't work ~ need to verify again)
Android = nok ~ only field in focus fills.

[nholden304]

You can detect if Chrome's autofill is being used with the "keydown" and "keyup" jQuery events. When Chrome's autofill triggers the "keydown" and "keyup" events, the event key and keyCode are undefined so it won't match any key on a regular keyboard, making it very easy to identify. Using this knowledge, I found a quick simple way to fix this by removing the inputmask on keydown and then re-initializing inputmask on keyup. See code below...

This will allow autofill to do it's job properly and then inputmask will take over after autofill is complete and format the values.

[RobinHerbots]

also #841

[jrock2004]

So my problem might be a little different and maybe this should be its own issue. So on our form we want CC exp as MM/YY. With the code in the following codeine, its autofilling the month correctly but for the year its taking the first 2 digits of the year instead of the last 2.

https://codepen.io/jrock2004/pen/WNQVoxe

[carlin-q-scott]

I had this problem with a phone number and I solved it by using the multiple masks option:

inputmask(["[phone]","9999999999"])

I thought this might work because when I hover over my autofill option, the phone number shows up in the field as straight digits with no formatting. But then when I selected the autofill option, the input field emptied out.

I expected this to effectively disable the mask when using autofill, but it doesn't. Inputmask correctly masks the value using the first mask I specified.

[insalespacecat]

Workaround:

• Autofilling still triggers simple webapi change event:
  

• Found the value within event.target.inputmask.undoValue:
  public autofillPatch(event: any) {
  const currentInputValue = event.target.inputmask.undoValue;
  }

• After we received the value we can do, for example this.formGroup.controls.input.setValue();