Chrome Autocomplete does not behave as expected when an input mask is applied

[michaelphipps]

Hi @RobinHerbots

TLDR; Input fields with an autocomplete attribute will be modified whenever autofill is used if an inputmask is applied. Expected behaviour is once a field with autocomplete contains data, it does not get modified by autofill.

Scenario: I have three fields.

<input type="text" id="full_name" class="form-control" placeholder="John Snow" autocomplete="name" >
<input type="tel" id="mobile" class="form-control" placeholder="04XX XXX XXX" autocomplete="tel" >
<input type="text" id="street_address" class="form-control" placeholder="1 Somewhere Street" autocomplete="street-address" >

Normally in a browser with autofill enabled, clicking on any of the fields will pop up the autofill selection. I select one of the details and the form gets filled with those details.

If I then click on one of the other fields, the autofill popup is displayed again. When I select one of the details, only the field I am on gets updated, because the other fields already have content.

When I add an input mask to the mobile number:

$("#mobile").inputmask({mask: "9999 999 999", placeholder: "04XX XXX XXX"});

The behaviour is the same for an empty form.

Once the form contains details, if I click on a field that has autocomplete and select any autofill option, it will modify any field containing an autocomplete attribute that has the inputmask applied, even if the field contains manually entered information

In this image I have manually entered a mobile number and have clicked on the address to change address

I selected a different address, and you will see the mobile number has been changed

Here is the demonstration: https://codepen.io/michaelphipps/pen/XWdZBgv

When you open that pen, the inputmask is initially commented out in the javascript window to show the normal behaviour. Uncomment to see how inputmask modifies fields that contain data when an option is selected from the autofill popup

• OS: Ubuntu 20.04
• Browser Google Chrome Version 84.0.4147.135 (Official Build) (64-bit)
• Inputmask version 5.0.5

[sKopheK]

@RobinHerbots any comments on this please?

[RobinHerbots]

I 've just read and tried your issue and you are correct. I will try to Fix this asap.

Op wo 13 jan. 2021 12:20 schreef sKopheK [email protected]:

@RobinHerbots https://github.com/RobinHerbots any comments on this please?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/RobinHerbots/Inputmask/issues/2388#issuecomment-759384067, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACNX36HCFMF3EPAU4BRCLLSZV6YXANCNFSM4RA733PQ .

[CeloGomesBR]

It's still happening.... 2023...