Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11: Keystrokes missing if v-model is used #6466

Closed
ckittelmann opened this issue Aug 28, 2017 · 5 comments
Closed

IE11: Keystrokes missing if v-model is used #6466

ckittelmann opened this issue Aug 28, 2017 · 5 comments

Comments

@ckittelmann
Copy link

ckittelmann commented Aug 28, 2017

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
Copy link
Member

posva commented Aug 28, 2017

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
Copy link

jsnanigans commented Aug 31, 2017

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
Copy link

marinru commented Sep 4, 2017

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
Copy link
Member

posva commented Sep 4, 2017

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
Copy link
Author

ckittelmann commented Sep 5, 2017

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/

ztlevi pushed a commit to ztlevi/vue that referenced this issue Feb 14, 2018
MutationObserver is unreliable in IE11. fix vuejs#6466
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
MutationObserver is unreliable in IE11. fix vuejs#6466
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants