v-model on text input on chrome mobile not behaving

[bbsimonbb]

Version

2.5.16

Reproduction link

https://jsbin.com/juzakis/1

Steps to reproduce

Open the jsbin on Chrome mobile. Type some text in both inputs.

What is expected?

v-model should be updating the model on input, after each keystroke, as in the Decomposed input.

What is actually happening?

The v-model input is not updated until the user leaves the field.

---

Seems like an issue to me. Chrome desktop shows the correct behaviour - the model is updated after every keystroke.
The editable jsbin is here. This issue came from
this stackoverflow question

[posva]

Works fine on Chrome mobile...

[bbsimonbb]

That was quick. Still not working for me and I'm not the only person to have observed this. I'll put up a video if I get a moment.

[posva]

If I cannot reproduce, I cannot do much so a video won't help unfortunately... I guess you have a plugin that interferes with how input event is triggered or something. Maybe the keyboard you are using on the phone is different

[bbsimonbb]

Yup. We just tried it in the office and every Android we tried shows the problem. Galaxy S4, S7 and S9, a Wiko Ufeel Prime. Safari on Iphone 7 behaves as expected, doesn't show the issue. My anonymous jsbin has expired, so here's a new one if you'd like to retest

[bbsimonbb]

The issue seems even more random than described. On the v-model input, updates are more frequent when adding chars in the middle of the string, or when deleting. Chars added at the end of the string are only updated when the user leaves the field or when when the cursor is repositioned!

The Decomposed input is meant to behave exactly like v-model, but in fact behaves much better - updates are processed with every keystroke. On all 5 phones tried!

All phones have default keyboard, and no chrome extensions that anyone's admitting.

[janein]

Experienced it on a Honor 8, but it worked fine on other Androids like Pixel 2, Samsung Galaxy something, ...

[bbsimonbb]

Was the Honor 8 in some weird language :-) We're all in France, so I'm wondering if the language setting of the keyboard has something to do with it (5 out of 5 androids tried in our office showed the issue)

[janein]

My phone (the Honor 8) is set to German/English and the other (working) ones to pure German.
Maybe it's because I'm using the Google Keyboard and not the default one?

[jckkk]

This is also an issue on OnePuls 6 and Samsung Galaxy S7. Tested on Firefox and Chorme with Gboard and Samsung Keyboard (Samsung only). CodeBoard keyboard on OnePlus works with no issue, so this seems to be keyboard dependent.

[skegel13]

Also experiencing this in Chrome on a Pixel 2, Brave and Firefox on Pixel 1. It does pick up the input if the first character is a number, but not letters.

Works fine on desktop.

[alex-gru]

Same here, please fix this behaviour.

Device: OnePlus 3T (Android 8.0.0, Build A3003_28_181206)
Browser: Chrome (72.0.3626.105)
Keyboard: Gboard (7.7.12.219989447-release-arm64-v8a)
Language: reproducible with English and German

Another scenario is shown in the video below. You see an input element and a submit button. The button's :disabled condition validates the input model to be non-empty. Apparently, the validation is only triggered when the text is numeric, or the text is delimited by special characters like comma or space.

https://youtu.be/7BEhQQoBgN4

EDIT: added YouTube link

[rolandort]

I was able to reproduce the same behaviour using the following simple JSFiddle (which uses Vue.js v2.6.8)

For mobile phones: https://jsbin.com/damesok/1
JS Fiddle: https://jsfiddle.net/DumboMustermann/xrqcs14a/

[StrangeWill]

Experiencing this on:

Chrome: 73.0.3683.90
OS: Android 8.10; Moto G (5s) Plus Build

The model properly updates when I:

• Tap outside of the field.
• Click the "enter" key on the keyboard (but only once, wont do it if I change it and tap it again, I have to tap out/into the field to be able to use the enter key again)
• When I blank the field out entirely (right on the last backspace it fires).

Will not properly update when I:

• Type any character into the field
• Hitting enter if enter has already been hit once and the model already updated once
• During the removal of any character using backspace