Vue: <textarea> and <input type=text> cursor issue in IE 11.0

[FranckFreiburger]

To reproduce:

• open https://vuejs.org/v2/guide/forms.html#Multiline-text with IE 11.0 (Edge) on Windows 7
• type some text in the textarea
• move the cursor at the beginning of the text (press the Home key)
• quickly type random chars
  => the cursor jumps to the end

same issue with input type=text (https://vuejs.org/v2/guide/forms.html#Text)

[posva]

Hi, thanks for opening the issue!
You can also do it by using ctrl + ←

[jdalton]

I can't reproduce this in Edge 15 or IE11 🤷

[posva]

@jdalton Hey thanks for tuning in. Do you think it got patched on IE 11 in the meanwhile? I'll have to try again

[jdalton]

IE 11 isn't getting patches like that, so not likely.

[posva]

It seems to still be happening:

[jdalton]

Ah ha! It's a tricky one! After trying it a few more times I could repro in IE11 too.
Still not able to repo in Edge 15 though 😃

[posva]

yeah, it doesn't happen on edge

[jblotus]

I tried and was unable to reproduce in IE11 version 11.1066.14393.0 (Windows 10) (Update Versions: 11.0.41)
or in edge 38.14393.1066.0

[vieelblond]

Same on safari 11.0 (13604.1.38.1.6) (macOS) and earlier versions

Try use custom component with input, like this:
https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

error is caused by
this.$emit("input",...)

[ThomHurks]

I'm having this exact issue but it also happens in Chrome 68. Does anyone have a workaround?

[ThomHurks]

@yyx990803 I have the feeling this is just caused by people using .trim as this causes the input to re-render often (and then the cursor jumps). A simple solution would be to add .trimlazy which only trims after a change event.

[Sunee67]

Is this issue fixed? I'm facing similar issue, can anyone help to fix this?

[MarcelloTheArcane]

@ThomHurks You can nest modifiers, like v-model.trim.lazy - https://jsfiddle.net/782y3e5g/

Can anyone see if this fixes the issue on the older browsers?