Version

3.2.31

Reproduction link

github.com

Steps to reproduce

Problem

v-model on textarea and input forms doesn't work properly on some mobile devices. When user type something, value sync only after unfocus (blur)

Code

<div id="app">
  <textarea v-model="text"></textarea>
  <div><span>{{ text }}</span></div>
</div>

<script type="text/javascript">
      Vue.createApp({
          data() {
              return {
                  text: ''
              }
          }
      }).mount('#app');
</script>

Works on most mobile devices and browsers, i.e Meizu C9 PRO (android 8.1.0 Chrome 99.0.4844.58)

But doen't work correctly on several mobile devices, i.e. Samsung Galaxy A50 (Android 11 Chrome 99.0.4844.58)

Our technical support kept information from clients about devices where problems also occurred:

• Samsung s10e (internal browser)
• Xiaomi Mi6 (internal browser)
• Apple Iphone XS (Safari v12.10.5-go)

But via "@input" it work's fine

<div id="app">
    <textarea @input="typing" type="text"></textarea>
    <div><span>{{ text }}</span></div>
</div>

<script type="text/javascript">
        Vue.createApp({
            data() {
                return {
                    text: ''
                }
            },
            methods: {
                typing(event) {
                    this.text = event.target.value
                }
            }
        }).mount('#app');
</script>

Samsung Galaxy A50

Versions

Vue 3

What is expected?

The same code works equally on any modern mobile devices, i.e. data from input sync when user typing (with v-model)

What is actually happening?

The same code doesn't work equally on some modern mobile devices, i.e. data from input sync only when blur input

Problem with our app on production

This is caused by IME composition as stated in the documentation here : https://vuejs.org/guide/essentials/forms.html#text (see Note about IME).

A workaround is to listen for @input event to manually update your ref. This is because non-ascii keyboards (also gboard for autocorrect?) hold the change event until character composition has finished (you can see it because what you're typing in underlined)

@paraboul thanks for explanation and reference!

Closing this as v-model is working as expected here.

I know it's not an issue with Vue, but might be worth adding things like the type of keyboard you use causing these types of problems (e.g. gboard), not just the language being typed, to that note in the docs. Just ran into this too, and when I originally read over the comment in the docs, it mislead me to think it wasn't related, as I wasn't using a language that is designated as IME.