Autowidth issue after using IME

[houjiazong]

Bad👎: https://syropian.github.io/vue-input-autowidth/

Good👍: https://codepen.io/lyuanqing/pen/xYpmKj

Good👍: https://jedwatson.github.io/react-input-autosize/

[syropian]

Could you explain how to reproduce the issue a little better? Some sample text would be helpful.

[houjiazong]

@syropian
OS: macOS Catalina 10.15.4
Browser: Chrome latest version (83.0.4103.97)
After using Chinese input method, the automatic width will be invalid

[syropian]

@houjiazong I'm not familiar with how to use Chinese input to reproduce the issue. Is there any steps I can easily follow to reproduce it?

[houjiazong]

@syropian
If you are using mac, you can refer here https://chinese.yabla.com/type-chinese-characters.php?platform=mac Add Chinese input method, and then input, you can reproduce

[syropian]

Great, thank you! I will try and get this fixed up soon.

[syropian]

@houjiazong After further investigation, it looks like the component is acting as intended.

Have a look at https://vuejs.org/v2/guide/forms.html.

From that article:

For languages that require an IME (Chinese, Japanese, Korean, etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater to these updates as well, use the input event instead.

So in short, don't use v-model with this directive if you require an IME, just use an input event.

Example:

<input @input="value = $event.target.value"/>