IE11: Keystrokes missing if v-model is used

[ckittelmann]

Version

2.4.2

Reproduction link

http://jsfiddle.net/zjsuzqgu/15/

Steps to reproduce

This issue only occurs in Internet Exporer 11 on textareas and input fields when using v-model binding.

1. Open the http://jsfiddle.net/zjsuzqgu/15/ with IE 11
2. Quickly enter text into the second textarea (maybe you should press 3 buttons at same time)

We used a barcode scanner to enter the texts, but its also possible to reproduce it with the keyboard.
We also recognized that it happens more often on slow machines

What is expected?

All keys are recognized

What is actually happening?

Some letters are missing randomly

---

We made a video of this behaviour: https://youtu.be/w-IYuPBGdR0

You could reproduce this even on the vuejs page https://vuejs.org/v2/guide/forms.html#Text

I just added a v-on:input to the textarea to see whats logged there.
The result was
A
A
AC
AC

The B was never recognized even in input event

I also changed the intercharacter delay of the scanner from 1 ms to 25 ms without success

[posva]

I cannot test it right now but if using an input listener yields that result, it's probably something wrong with IE messing up v-model

[jsnanigans]

I don't know for sure what going on in the source that could cause this, but its definitely not the input listener, if you don't use v-model and instead use @input it works fine in ie11.
test: http://jsfiddle.net/zjsuzqgu/21/

@ckittelmann I imagine that if you are using a barcode scanner you only need to listen to the keyup event, and if you don't need the two-way data-binding then this might be a solution for you.

[marinru]

Pressing several buttons at the same time fires several input events (one for each button the keyboard sends), that's ok. What is not ok with IE11 with v-model binding is the fact that every other event handler gets fired before the input value is changed, the pattern is like this:

• a char is added to the input value
• input handler is fired
• input handler is fired
• a char is added to the input value
  ...

I suspect it may have something to do with the nextTick behavior. BTW, timerFunc is called only half the time in IE11 unlike, for example, Chrome or FF.

[posva]

Finally, could test on IE11. It's also weird when you keep 3 keys pressed because only 1 gets repeated.
v-model has some fixes to work around IE crazy behaviour and here, it's definitely messing up some other things. Not sure to mark this as an improvement or a bug, or both.

As a workaround, use an input listener, which does yield the expected result you want

[ckittelmann]

Thx @jsnanigans for the workaround I will look at our application, but I think we need the two way binding.
I just tested this behaviour in 1.0.28 and 2.0.0. It only occurs in 2.0.0+
Some examples to test it:
Version 1.0.28 http://jsfiddle.net/8hg4f5gv/3/
Version 2.0.0 http://jsfiddle.net/8hg4f5gv/2/