syropian/vue-input-autowidth

Autowidth issue after using IME

houjiazong opened this issue · 6 comments

syropian commented

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

houjiazong commented

@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 commented

@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 commented

@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 commented

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

syropian commented

@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"/>