Chrome Autofill does not trigger change

[VinceG]

Version

2.5.3

Reproduction link

https://jsfiddle.net/n2kcp15b/

Steps to reproduce

1. open any form that has a textfield
2. auto complete it from chrome auto fill
3. check the attached v-model and see that it didn't update

What is expected?

update the v-model from what ever chrome autofilled

What is actually happening?

no update is happening

---

This only happens on Chrome on iOS (safari works fine). I also got reports it has the same issue on Chrome on Android but i didn't confirm.

This seems to be still an issue and i saw a few github issues that reported the same thing months ago but are now closed.

[VinceG]

Currently the workaround i have is:

setInterval(() => {
  let value = $('#' + this.id).val();
  if(value != '' && this.value != value) {
    this.value = value;
  }
}, 50);

[posva]

It works fine on Android, cannot test on iOS but there's a known issue with iOS Safari not emitting events when autocompleting, so, unfortunately, I'm not sure we can do something.
@VinceG There must be an event you can listen to instead of checking the value every 50ms, Maybe listening to the blur event will work

[yyx990803]

I don't think this is something we can fix at the framework level, because it's buggy behavior in one specific browser (not firing input events on autocomplete). A userland workaround seems to be the only way here - I'd suggest only adding the setInterval when you know you are in that specific browser, alternatively, perform the manual sync once before submitting.

[sanntanna]

Wrap elements in <form> to trigger OnChange event

[KyleMit]

This issue is not unique to Vue and other front end frameworks have tried to tackle this as well

The General Problem

According to this post on Detecting Browser Autofill from StackOverflow

The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field.

Change event trigger for different browsers:

• For username / password fields:
  • Firefox 4 & IE 7 - don't dispatch the change event.
  • Safari 5 & Chrome 9 - do dispatch the change event.
• For other form fields:
  • IE 7 - don't dispatch the change event.
  • Firefox 4 - does dispatch the change change event, but only when users select a value from a list of suggestions and tab out of the field.
  • Chrome 9 - does not dispatch the change event.
  • Safari 5 - does dispatch the change event.

Hack For WebKit browsers

According to the MDN docs for the :-webkit-autofill CSS pseudo-class:

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser

So, leveraging that property:

We can define a void transition css rule on the desired <input> element once it is :-webkit-autofilled. JS will then be able to hook onto the animationstart event.

Credit to the Klarna UI team for coming up with the solution here:

klarna/ui/Field/styles.scss:

:-webkit-autofill {
    /* Expose a hook for JavaScript when auto fill is shown. */
    /* JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillStart;

    // Make the backgound color become yellow _really slowly_
    transition: background-color 50000s ease-in-out 0s;
 }

:not(:-webkit-autofill) {
    /* Expose a hook for JS onAutoFillCancel */
    /* JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillCancel;
}

klarna/ui/Field/index.js:

this.refs.input.addEventListener('animationstart', (e) => {
  switch (e.animationName) {
    case defaultStyles.onAutoFillStart:
      return this.onAutoFillStart()

    case defaultStyles.onAutoFillCancel:
      return this.onAutoFillCancel()
  }
})

---

Outside of that, you're probably going to have to resort to polling for changes, since we can't guarantee an event will fire.

The library tbosch/autofill-event bills itself as "A polyfill to fire a change event when the browser auto fills form fields".

[VinceG]

@KyleMit Thanks for the details explanation. It's a-shame that we still don't have a proper consistent API to work with across browsers.

[runnez]

You may add "name" attribute. It works for me in last Chrome ☮️

[ElectroMyStyle]

You may add "name" attribute. It works for me in last Chrome

This trick works great, thanks!

[invisor]

You may add "name" attribute. It works for me in last Chrome ☮️

Confirm, It works! It looks like all fields that can be autofiled should have "name" attribute

[WormGirl]

I have the same problem on Macos 10.13.3, chrome 70.0.3538.110.I find that just change when you click on any other non-input place, the change event will trigger, This seems to be triggered when the input's blur event fires.This is really weird.

[WormGirl]

You may add "name" attribute. It works for me in last Chrome ☮️

This not works for me,I do form validation when the blur event fires. When the blur event is triggered for the first time，the model of username and password was empty string.But when you click on any other non-input place, the change event will trigger,The model will get the autofilled value, This is really weird

[WormGirl]

It works fine on Android, cannot test on iOS but there's a known issue with iOS Safari not emitting events when autocompleting, so, unfortunately, I'm not sure we can do something.
@VinceG There must be an event you can listen to instead of checking the value every 50ms, Maybe listening to the blur event will work
I agree with you, I think it will trigger change when blur event is occurred
do something like this:

handleBlur ($evt) { 
   this.$nextTick().then(() => {
       // The model here will get the autofilled value
   })
}

@yyx990803 why need this $nextTick()?