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.

[dumboxp]

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

[alex-gru]

@posva commented in the related issue #9777:

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

in my YouTube demo above, you indeed see this underlined text, so apparently, there is this "composition" process going on. do you all agree, that most users (and as you can see even developers) are not aware of this composition step and its limitations? is there no way to ignore this and still update the model as expected? thanks @posva!

[alex-gru]

@bbsimonbb I totally agree and I'm with you! I guess we should poke @posva 🙊

[posva]

v-model is not like @input. What keyboard are you using on what android That behaves like composing (and seems to be using it)?

On Mon 1 Apr 2019 at 12:21, Alexander Gruschina ***@***.***> wrote: @bbsimonbb <https://github.com/bbsimonbb> I totally agree and I'm with you! I guess we should poke @posva <https://github.com/posva> 🙊 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9299 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAoicbtbjzurpKrGgIbF59b1kufxnC4Aks5vcd3BgaJpZM4Z5Dvn> .

-- Eduardo San Martin Morote

[alex-gru]

@posva see comment above.

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

[bbsimonbb]

@posva you say v-model is not like v-on:input, but the docs say the opposite. I'm not raising this issue because I'd like it to work some way. I'm raising it because the docs say it works like X and it very plainly doesn't. A solution to this issue would be to correct the docs. (but v-on:input works very well, works like using a hard keyboard, even if I'm using composition)

I'm using Gboard. Gboard might well be on all the phones used when we tested this, since it's installed by default.

[LinusBorg]

@posva you say v-model is not like v-on:input, but the docs say the opposite. I'm not raising this issue because I'd like it to work some way. I'm raising it because the docs say it works like X and it very plainly doesn't.

The section of the docs that you link to explicitly talks about using v-model on components. Which is something very different from using v-model on DOM form elements like you do in your demo.

That is documet here, and you can see that v-model does a lot of things that @input doesn't do, i.e. offer modifierts for lazy, trim etc, as well as dynamically deciding for which event to listen depending on the element (input for text inputs, change for select elements etc.). In general, it has a lot of internal logic that a plain v-on event listener doesn't provide/have.

One of these things that v-model does is what @posva described: it intentionally waits for spaces or numbers before updating if the input is a "composing" one. That's what he means.

Please note that I'm not claming who's right about the reported issue since I haven't investigated so far - I merely wanted to correct your specific misconception about the docs and the behaviour of v-model.

Either way, I would agree that docs can be improved regarding this behaviour

Edit: Your example works fine with my normal keyboard, and it shows the described behaviour with the GBoard keyboard indeed.

[bbsimonbb]

@LinusBorg Ok I'm starting to get it, but I don't agree ! The section of docs I quote is, as you say, v-model for components, but when it says "remember that", it's clearly saying what v-model does in general, not just on components.

Understanding all that, I can see that the current behaviour is consistent and there's a reason for it (the input is 'provisional' and might change). But even when you understand it, it doesn't seem right to wait indefinitely and not see your model updated. I think the best choice in most situations will be to ditch v-model and use v-input. (Remember we're talking about text input in any languages on any Android device with default settings. It's a big slice of the pie). If this behaviour suits the input of logographic (chinese) characters, couldn't we add a test to switch it off for latin characters?

[yyx990803]

#9777 (comment)

[bbsimonbb]

Ok well thanks to everyone who took the time to talk me through this. Clearly I got a bit stuck on one idea of how it should work. I'll try and be a bit sharper next time.

[alex-gru]

Same here. Thanks everyone! 🙏

[victorforissier]

just use @input instead of v-model....

here, it works:

https://jsbin.com/juzakis/1/edit?html,js,output

[monkeydkon]

I came across this issue today as well. But i really cannot understand it.
I am currently developing 2 several apps using Vue and Capacitor.
In one of the apps this issue cannot be seen at all, but at the other it exists. I managed to sort it out using a custom v-eager directive implementation I found on github.
But what is the matter?

[rukshn]

I also came across with the same issue today on my Android chrome mobile browser.

The v-on:input or v:on-change is not firing when typing on the mobile device.

This has to work because the input field is attached to an auto-complete and it is not working because of this

[aremu-smog]

Use v-on:keyup for to monitor changes in input boxes. v-on:change should be used select boxes

…

On Fri, May 22, 2020, 4:00 AM Rukshan Ranatunge ***@***.***> wrote: I also came across with the same issue today on my Android chrome mobile browser. The v-on:input or v:on-change is not firing when typing on the mobile device. This has to work because the input field is attached to an auto-complete and it is not working because of this — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#9299 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALP3ZWQMU5QQN43YIFFWKVDRSXTEFANCNFSM4GPEHPTQ> .

[rukshn]

Use v-on:keyup for to monitor changes in input boxes. v-on:change should be used select boxes

This still does not work when it comes to mobile. The problem is the v-on:change , v-on:input , or v-on:keyup nothing works on a mobile browser

[themobileprof]

This should be triggered by a space bar, due to the composition thingy.
Here is a work around:

Replacing v-model="search" with v-bind:value="search" and v-on:input="search= $event.target.value" works.

Reference: [https://github.com//issues/8231]

[FelixRe0]

For anybody still having the issue:

Adding autocomplete="off" to the form or text-field disables the functionality, resolving any issues. Please note the side-effects.
Also working on vuetify forms if added to v-text-field

Reference:
https://www.w3docs.com/snippets/html/how-to-disable-browser-autocomplete-and-autofill-on-html-form-and-input-fields.html
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

[posva]

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

@nolimitdev this is enough, as a maintainer, I deserve to be treated better than that (especially when it's repeated behavior).