Document android v-model quirk

[danstewart]

See vuejs/vue#8723

[richrd]

This is great to have in the docs!

One small thing that I would like to point out is that the issue is actually not the way android works. Instead the issue is how vue works on andriod. Instead of listening to the input event on android vue listens to compositionstart and compositionend. Those events effectively signal when autocomplete begins and ends. The input event is triggered on android the same way it is triggered on desktop browsers.

[danstewart]

@richrd Thanks for the info, I've changed the wording.

[phanan]

Pinging @chrisvfritz and @posva as I wasn't involved in the original issue.

[posva]

I'm not sure the message is explicit enough. Wasn't the original problem that the value won't be updated until the autocomplete value is selected on any device? If it's not, I may be missing something

[danstewart]

@posva The value won't be updated on Android until the autocomplete is selected/dismissed - either from space, backspace, closing the keyboard or just tapping the suggestion.

It works as expected if autocomplete is switched off.

What would you like the message changed to?

[posva]

To me, this is something common to any device, not just Android. I'm confused by why this would happen only in Android

[richrd]

I'm not quite sure what criteria vue uses to decide to use compositionstart and compositionend but the code is here https://github.com/vuejs/vue/blob/636c9b4ef17f2062720b677cbbe613f146f4d4db/src/platforms/web/runtime/directives/model.js#L37. I also found out that the input event seems to always be bound but it's ignored while composition is active vuejs/vue@5b4b926#diff-7cb22b67c6250cfa775a3cfb6471b700L37

I just tested this on Browserstack, and wasn't able to reproduce it on iOS (but I don't have a physical iPhone right now to verify that). I definitely happens on Android.

[danstewart]

@posva I've just tried on an iPhone and iPad and it updates as I type.

Is it this part that handles it?
https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/dist/vue.esm.browser.js#L7776

[richrd]

@danstewart that !isAndroid check has been removed in the latest version of vue.
EDIT: reference: vuejs/vue@f7ca21e

[posva]

but what kind of autocomplete is treated as composition?

[danstewart]

@posva Sorry, not sure what you're asking?
I know android autocomplete does but ios doesn't.

[richrd]

Excellent question. I don't have any definitive answer but at least on my OnePlus 3 (using googles Gboard and chrome) any input that gives at least one autocomplete suggestion is considered composition.

Some tests:

• typing "he" will suggest "hello" and won't update the model during autocompletion
• typing numbers or symbols won't suggest anything thus the model updates
• typing japanese or chinese also has suggestions thus the model won't update
• using voice typing updates the model but obviously not one character at a time (the entire phrase is inserted as expected)
• after turning off suggestions the model updates with every keypress

[posva]

I'm trying to understand what happens 😆 I don't have an android to test right now but I cannot visualize the problem.
The way I see it is, you start to type, autocompletion comes up but it is not selected, value keeps updating to what you type. If you select the autocomplete value, then the value is updated. Isn't this what is happening on Android?

[richrd]

Yes, that's pretty much the case. Here's a video https://lounge.bittemple.org/uploads/bd55166ca332588b/2018_09_16_19_28_03.mp4

[posva]

Now I get it! So it's the keyboard actually doing composition while writing words. In that case. It may be better combining the tip with the previous one. WDYT @phanan @chrisvfritz ?

[sdras]

This is a great addtiion! @posva makes a good point, it does seem a little weird to have two tips in a row. What do people think of combining them with bullet points under a heading?

[garygreen]

Just stumbled across this as well. According to https://en.wikipedia.org/wiki/Input_method - composition is only really required for Chinese, Japanese, Korean and Indic characters, so for mostly English-applications the default behaviour of v-model seems counter intuitive and is stinging a lot of people.

I personally think v-model shouldn't use composition and there should be a new directive added v-model-composition to make this functionality clear in it's intent. Yes this is a breaking change, but some would argue it's also a bug fix and more clearly exposes what Vue is doing under the hood with compositionstart compositionend events.

Anyway, for the time being, instead of e.g. v-model="query", I'm always going to use:

v-bind:value="query"
v-on:input="query = $event.target.value"

[posva]

Coming back to this, it's not accurate as a description. It's not relative to Android but to GBoard keyboard (default keyboard) in Android, which does, for some reason, use composition when suggesting words. As stated in many issues, current v-model is working as expected.
I created vuejs/vue#9814 to add a simple way to disable the composing check