Vue: v-model does not working properly with Korean chars (only with IE 11)

Created on 2 Jan 2017  路  4Comments  路  Source: vuejs/vue

Vue.js version

2.1.6

Reproduction Link

https://jsfiddle.net/6ttjtuy7/ (Open this link with IE11 please)

Steps to reproduce

  1. Type any English characters to INPUT, then click SEARCH button, you will see a alert() popup with every characters you typed in INPUT filed
  2. Then put some Korean characters after those English characters. If you COPY & PASTE some Korean Character into INPUT filed, it work properly, but if you just types some Korean characters and hit the SEARCH button, then you will see a alert pops up only with English characters
  3. After that, the value of the INPUT is freezing. (It cannot be modified via INPUT filed)

What is Expected?

alert() properly with all characters including Korean characters.

What is actually happening?

alert() only English characters which you typed in just before Korean characters.

The v-model looks like 'FREEZE', because after typing some Korean Characters, v-model does not change even if English characters are typed.

I guess it is connected with the Korean IME issue, (https://github.com/vuejs/vue/issues/4330)
But situation here is a bit different. cause this happens only with IE11(not tested in IE11 below, though). Chrome & FF works properly as I intended.

In my opinion, the reason of this issue is 'unfinished compositing of characters'. The difference between C&P / typing Korean Characters is :

COPY & PASTE --> Finishing compositing
JUST TYPING --> Not Finishing compositing

So, please check this out.

Most helpful comment

vuekoreantest

The picture recorded my test . IE 11 with Korean IME of Windows 10 .

  • When blue block was not disappeared and I clicked the button , alert() don't show the last Korean characters.
  • And if I keep typing letters , alert() will still not show the letters .
  • Until I type in some characters ( not composed of letters ) like Korean or Chinese , and the blue block disappear , it will work .

All 4 comments

I tested on IE 11 with Korean IME and it worked fine. But I may be missing something as I usually never type in any language that uses IME

Sorry, @phanan and I couldn't reproduce the issue on IE11

vuekoreantest

The picture recorded my test . IE 11 with Korean IME of Windows 10 .

  • When blue block was not disappeared and I clicked the button , alert() don't show the last Korean characters.
  • And if I keep typing letters , alert() will still not show the letters .
  • Until I type in some characters ( not composed of letters ) like Korean or Chinese , and the blue block disappear , it will work .

I tested further and it seems there's a bug with IE11: it doesn't fire compositionend when in the middle of writing something and blurring out the input. However, we can listen to blur event to work around its issue.
This can even be done in userland: https://jsfiddle.net/posva/g94vLx3o/

Was this page helpful?
0 / 5 - 0 ratings