Vue: v-model breaks selectionStart

Created on 3 Jun 2016  ·  7Comments  ·  Source: vuejs/vue

Vue.js version


Reproduction Link
go to demo folder and open index.html

Steps to reproduce

Input something into the Email layout input field.
Put the cursor in the middle of your text.
Hit backspace on the virtual keyboard.

What is Expected?

The text will be removed in the cursor position.

What is actually happening?

The text removes from the end of the string. selectionStart attribute is changed somehow by Vue.js

P.S. You can test it on other input elements which do not have v-model on it.Everything will work well.


Most helpful comment

I didn't had internet yesterday 😢 I hope being able to do it this evening

All 7 comments


Thanks for filing the issue 😄 . Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

I cloned your repo and tested it on chrome, it works well. Next time provide a simple repro. People can't go through your whole application to help...

Thanks for the feedback. I'll provide a gh-pages link soon. It's impossible to reproduce the bug on the codepen or jsfiddle due to Piano.js nature.

I see, in that case it may be due to Piano.js. It'd be great if you can create a repro without pianojs 👍

@posva Hi again! Here's a codepen with repro
Steps to reproduce:

  1. Insert text into first input
  2. Select some text
  3. Click a button near your input

Looking forward for your response!

Thanks! I found the bug. The update resets those values so caching them here and taking them back there actually solves the issue. I'm not sure about how to test this though. I may have to write an e2e test

PS: I'm doing this tomorrow, going to sleep 😴

I didn't had internet yesterday 😢 I hope being able to do it this evening

Finally got internet back. I'm having some trouble creating a test that breaks as a unit test. I'll try again today with an e2e test although it's a by overkill. Calling the blur method on the input doesn't behave the same way as actually doing.
The fix I came up with is not setting the input value if it hasn't changed at blur. It's basically adding _toString(self._watcher.value) !== el.value to the conditions here

Was this page helpful?
0 / 5 - 0 ratings