Vue: v-model on text input on chrome android not updating

[skegel13]

Version

2.6.8

Reproduction link

https://jsbin.com/damesok/1

Steps to reproduce

Using v-model on text inputs in Vue is not updating a normal characters are being typed. However, numbers and spaces do trigger the update.

What is expected?

My value on v-model should be updated when I type into the field in Chrome on Android

What is actually happening?

The input is not being detected until I insert a number or a space.

---

I was able to get this to work on mobile using :value="model" and @input="model = $event.target.value", but I would assume v-model should work the same.

I am creating this issue because an older issue reporting the same behavior has been closed but it does not appear the issue was fixed.

https://github.com/vuejs/vue/issues/9299

[posva]

This is because you are using a keyboard that does composition (it may underline the text while typing). It is similar to Chinese input, Japanese input and many others. Vue intentionally waits if composing. Numbers and spaces terminate the composition mode

[bbsimonbb]

@posva How many times are you planning to close this issue? I know that you've got a lucky phone that works perfectly, but you've now got 7 independent reports of this behaviour. Composition has nothing to do with it.

[yyx990803]

This is working as expected. Gboard (and some other Android keyboards) has the feature of word suggestions - i.e. it shows a number of suggestions while you are half way through typing a word. This is marked by an underline under the current word that is being typed. It is considered incomplete until you either hit space (indicating ending the word) or explicitly selecting a suggestion. This is implemented using the same IME composition model as used in other language inputs.

There is no way for Vue to special case this vs. other languages, and changing the behavior would be a breaking change. So this is a wontfix.

If you for some reason absolutely need to update the model on every keypress, use a custom @input/:value pair.

[brianhafferkamp]

@yyx990803 when you say "this is a wontfix", are you saying the .eager modifier in https://github.com/vuejs/vue/pull/9814 won't be added?

[tmorehouse]

One option is to listen for blur events on the input and update the v-model with the current evt.target.value to catch any un-finished autocomplete characters (i.e. input has text he when the auto-suggested word is hello, the v-model is currently '', but on blur the v-model gets updated to he)

[kuroski]

Hello guys, just a heads up regarding this problem.

I've managed to fix just by changing my form data variables initial values from null to a empty string.

I've found the answer here: https://forum.vuejs.org/t/v-model-not-working-on-chrome-browser-on-android-device/36364/4?u=kuroski

So:

<template>
...
<v-text-field
  id="message"
  v-model="message"
  label="Message*"
  required
></v-text-field>
...
</template>

<script>
....
data: () => ({
    message: null // This doesn't work
}),
</script>

<script>
....
data: () => ({
    message: '' // This works
}),
</script>

If you couldn't fix the problem just by using :value/@input, or by initializing the variable with empty strings, I wrote a simple directive to fix this problem meanwhile we don't have the .eager modifier

https://github.com/kuroski/v-eager