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)

[richrd]

the browser doesn't inform about something being typed

It does inform of something being typed via the standard input event.
The simplest workaround for the example above is just adding v-on:input="searchQuery = $event.target.value" to the input element.

This is the same issue as #8723

[nolimitdev]

@posva @richrd
Why this PR is still not visible in official doc? https://vuejs.org/v2/guide/forms.html I have found this bug but doc does not mention it and I ended here with this issue and many other similar issues. This bug was not in VUE 1. I tested it now. I think instead of adding note/warning to doc it should be fixed to work well such as in VUE 1. What is difference that v-model was working well in VUE 1 when text prediction is enabled in android device but it is not working (and will be never more working) in VUE 2? Thanks for explanation.

@posva you wrote...

it's because you're in composition mode (For accents, or languages like Japanese) (see the underline)

It is not truth. This bug also happens for any language (including english) when I turn on text auto prediction. It has not to do with languages like Japanese but in global with text auto prediction enabled.

This is completely normal because until composition isn't finished, the browser doesn't inform about something being typed

It is also not truth. Browser must be informed because of this two proofs:
1.) How it is possible that in VUE 1 v-model was working fine with text auto prediction enabled? I have tested it now.
2.) Replacing v-model="search" with v-bind:value="search" and v-on:input="search= $event.target.value" works.

So you closed this issue prematurely without a deeper analysis such as you also closed this same issue.

[richrd]

I mostly agree with @nolimitdev, When I came across this issue, I thought that it was a browser issue or that maybe I was doing something wrong. I think it's very unintuitive that the model doesn't update on every keypress, but even more so that it works differently depending on the platform. As far as I know no other major frameworks behave like this.

That said I'm not really into getting into a debate about it. I just think that either the docs or the implementation needs to be changed. The current situation just causes confusion.

If the implementation were to be changed, I would suggest adding some option to v-model that when enabled only updates the model on composition events and does so consistently on all platforms. That way developers could make the choice depending on their usecase.

[jgalentine007]

I just hit this too when testing Vee Validate. Frustrating spending a couple hours trying to figure out if it's my code, vue, vee validate or browser (Android 8.0, Galaxy S9, Galaxy Keyboard.) I reckon a large percentage of users would be affected by this.