v-model does not sync when browser autocompletes

[ElMatella]

Version

2.2.4

Reproduction link

https://martar.fr/demo-vue.html

Steps to reproduce

• Use the following snippet:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <form @submit.prevent="doSomething()">
        <input type="email" v-model="email" name="email">
        <input type="password" name="password">
        <input type="submit" value="send">
    </form>

    {{ email }}
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      email: ''
    },
    method: {
      doSomething() {
        alert(this.email)
      }
    }
  })
</script>

• Go to Chrome Mobile
• Begin to tap an email
• Choose an email from Chrome list
• See that v-model did not work

Here some screenshots of the problem:

What is expected?

v-model is supposed to be updated on autoupdate

What is actually happening?

the model is not updated

---

[znck]

Can't reproduce. Not much can be done without repro.

[posva]

The repro is fine, you need to have used the phone with email inputs already. I tested on Androi 6 and it works just fine. Unfortunately I don't have an iPhone

[znck]

Tested on iPad safari & chrome. Working as expected.

[ElMatella]

I updated the reproduction on a self hosted server, so you can access it through https://martar.fr/demo-vue.html

Safari does not seem to reproduce the problem, however, Chrome IOS does it all the time with this code.

I am using Google Chrome 57.0.2987.100 on an Iphone 5 10.2.1

[znck]

@vuejs/collaborators can anyone confirm this?

[franciscolourenco]

@ElMatella It works fine in Safari. Not been using Chrome so don't have a saved email. Can you provide a submittable form, so the email gets saved by Chrome?

[ElMatella]

I updated the form, so you can submit it https://martar.fr/demo-vue.html

[franciscolourenco]

I can reproduce on iOS 10.2.1, Chrome 57.0.2987.100

[posva]

@ElMatella I recommend you to open the issue on the chrome issue tracker anyway. It's probably an issue with the iOS chrome version not firing the input/change event when autocompleting from keyboard suggestions

[ElMatella]

Hi @posva thank you for the advice, I went to the chrome issue tracker (the chromium one, I don't even know if this is what I should look for), but I admit that I don't feel very confident with their system, I'm not a huge actor on community devs... But I wonder, if the issue appears on a "stable version" of chrome, should'nt be Vue that should adapt?

Again, I am not used to this... And I am not familiar with Vue core, where are defined the events to listen on inputs changes?

[ElMatella]

Ok, I updated the snippet I created with this:

<div id="app">
	<form method="get" action="demo-vue.html">
		<input type="email" v-model="email" name="email" @change="saySomething()">
		<input type="submit" value="send">
	</form>
  
  {{ email }}
</div>
<script type="text/javascript">
	new Vue({
	  el: '#app',
	  data: {
	    email: ''
	  },
	  methods: {
	  	saySomething () {
  			alert('olas')
	  	}
	  }
	})
</script>

The v-model is only listening for the input event. However, the IOS chrome autocomplete behaviour triggers the change event. So could we not update the data on the change event also?

[posva]

No, because stable versions do have bugs 😄
Yes, it's there where the error should be reported. I personally cannot reproduce it because I don't own an iPhone, and I do not get any autocomplete option in the emulator. To go further you could check if the input emits thechange or input event (this can be done with vanilla js) when autocompleting and check if the behaviour is different from ios chrome to a desktop chrome. If it is, then you should report the bug in the chromium issue tracker https://bugs.chromium.org/p/chromium/issues/list

[ElMatella]

Ok, I submitted an issue: https://bugs.chromium.org/p/chromium/issues/detail?id=705275#

In the meantime, I am going to manually listen on the change event to update model... I keep you informed of Chrome team responses, thank you :)