[Bug Report] v-text-field not wait chinese input method (IME) input to end when use v-model bind a computed attribute

[LazyLZ]

Versions and Environment

Vuetify: 1.3.11
Vue: 2.5.17
Browsers: Maxthon 5.2.5.4000, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Internet Explorer, Opera, Other
OS: iOS, Mac OSX

Steps to reproduce

1. a v-text-field use v-model bind a computed attribute

<v-text-field
    label="Chinese input | 中文输入"
    v-model="inputFormatted"
></v-text-field>

2. change input value in set method of computed attribute

  data: ()=>({
    inputValue: ''
  }),
  computed: {
    inputFormatted: {
      get(){
        return this.inputValue
      },
      set(val) {
        this.inputValue = val.toUpperCase()
      }
    }
  }

3. The code in set method will break the default chinese input method in iOS and macOS, which will prevent you from entering Chinese character

Expected Behavior

text field wait IME input to end

Actual Behavior

text field interrupts the input of IME and can't input chinese character

Reproduction Link

https://codepen.io/lazylz/pen/WYgmBb

Other comments

This problem can also occur in other languages that require an IME (Japanese, Korean etc.)
this issue not happened on native input tag，because v-model waits input method input to end (use compositionend event) before it refresh value

[myleslee]

This is not platform specific. It's a general issue for users using IME, which has been well documented by Vue.js.
https://vuejs.org/v2/guide/forms.html#vmodel-ime-tip

More explanation can be found in issue vuejs/vue#5902

The solution is cooked right into the directive v-model but vuetify fails to respect it. See Source code of v-model

Thing can get very ugly in terms of a search input where incorrect results will be returned in the middle of IME composing (before the intended character arrives in the input).

Interestingly, Quasar has the same issue quasarframework/quasar#4482

[kouqon]

VTextField update internalValue on onInput(evt) and onKeyDown(evt) .
But these method do not check evt.isComposing property.
internalValue should not update if (evt.isComposing == true) to prevent conflict with InputMethod.

VTextField-isComposing.patch.txt

[suzukiichiro]

Chrome only sends events where the isComposing property is true
Therefore, the input value is not reflected

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.