v-model on mobile not updating until a space is pressed

[choyg]

Version

2.5.16

Reproduction link

https://jsfiddle.net/yyx990803/xkkbfL3L/?utm_source=website&utm_medium=embed&utm_campaign=xkkbfL3L

Steps to reproduce

https://www.youtube.com/watch?v=y8CASLitwdw

1. Type into input/textarea with Android (don't have iOS to test with)

What is expected?

Input data should be updated per keypress

What is actually happening?

Input data is only updated after a space is pressed

---

Reproduced on Android 7.1 Chrome 66 and Android 4.4.2 Firefox 60

[posva]

it's because you're in composition mode (For accents, or languages like Japanese) (see the underline)
This is completely normal because until composition isn't finished, the browser Vue doesn't inform about something being typed

[choyg]

If I understand you correctly, this will happen for all keyboards?

Current documentation implies this should only happen for keyboards that require an IME

[sc85]

Is there a way to still update the model directly and not wait for the compositionend event? I am working on a live search and on Android it is simply not working before adding space, moving focus etc. but the idea is that it is live...

[ArtistNeverStop]

Ok, I dont know if there is another solution for this issue, but it can be solved with a simple directive:

Vue.directive('$model', {
  bind: function (el, binding, vnode) {
    el.oninput = () => (vnode.context[binding.expression] = el.value)
  }
})

using it just like

<input v-$model="{toBind}">

It works fine for me.
Android 8.0 (Chrome 68)
Android (Firefox 61)

[kasperkamperman]

For me, this was easier than using a directive:

Instead of:

v-model="searchQuary"

do:

:value="searchQuery"
@input="e => searchQuery = e.target.value"

[posva]

I have answered this question so many times already and even provided an alternative (#9814). #9777 (comment) explains it best.