Vue: Jumping cursor issue with Content-Editable two way data binding using Array of Objects

[priyashpatil]

Version

2.5.17-beta.0

Reproduction link

https://codepen.io/priyashpatil/pen/PeyydQ

Steps to reproduce

Card Panel List is editable so try to typing to change content in "Using Objects" Panel.

What is expected?

Cursor should not jump to start position of content editable element having two way data binding.

What is actually happening?

Cursor jump to start position of element due to re rending of element.

[posva]

The reason it doesn't jump is that you're not reactively setting the data (see reactivity caveats in docs). If you use splice you see the same behaviour.

contenteditable needs special treatment and it would bloat Vue code if it was supported out of the box. So instead we recommend using third party plugins.

See https://github.com/vuejs/vue/issues/4681#issuecomment-271450232 and https://github.com/vuejs/vue/issues/1670#issuecomment-153089559