Subscribe on changes!

v-model does not work on mobile and input text

avatar
Sep 9th 2020

Version

3.0.0-rc.10

Reproduction link

https://codesandbox.io/s/determined-ritchie-fcre3?file=/src/App.vue

Steps to reproduce

1st. Open page on PC and write in input.

2nd. Open the page in mobile and write in the input.

What is expected?

1s.t It works correctly. You can see the reactive text output below the input.

2nd. It works correctly. You can see the reactive text output below the input.

What is actually happening?

2nd. It does not work. The reactive output does not change until the mobile keyboard is hidden.

avatar
Sep 10th 2020

Modify <input v-model="text"> to <input v-model:value="text">

Please read https://v3.vuejs.org/guide/migration/v-model.html#v-model

avatar
Sep 10th 2020

That does not work. Also, I can't find what you say in the documentation. input is a native element, it is not a custom component.

Anyway, it doesn't make sense that it works on PC and not on mobile browsers. If this were a change it would not work on any platform or browser.

avatar
Sep 10th 2020

I cannot reproduce the issue according to your steps, maybe you need to provide more detailed info, such as device information, what browser...

avatar
Sep 10th 2020

This is because you are using a keyboard that works similar to IME https://v3.vuejs.org/guide/forms.html#basic-usage (see the note about Chinese)

My guess is you are using a Google keyboard that has some autocompletion. v-model intentionally delay setting the variable if the event is composing (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing)

avatar
Sep 10th 2020

My phone is a Huawei P30 PRO (Android 10) (EMUI 10.1.0). My browser is google chrome, updated in the play store.

My keyboard is in Spanish and it's Google's. I have checked in the documentation for Vue 2 and the error is also present. @posva My keyboard is very common, it is used by all Android, why is this not solved? I think it is a bug and should not be expected behavior.

avatar
Sep 10th 2020

I have checked in the documentation for Vue 2 and the error is also present.

Because it's intended. It's not an error. Please search existing issues in vue repo for deeper explanations.

Without that fix we have, the value of v-model would become any intermediary steps. In Spanish, it would be while typing accents: the value would become ' (or something similar), then after pressing e, é. But in other languages like Japanese and Chinese, it would be even worse because of how things are typed