13 Mar 2018
Over the weekend, I was debugging a strange issue on my site built with Vue.js.
input-text component which wraps an
input element. When I type, after the
first character, the focus will be lost.
This is not flaky. This happens every time.
Here's the demo: https://jsfiddle.net/c6tnzLL7/6/
After spending a few hours debugging this issue (mainly by deleting the irrelevant code), I've found that it's due to registering the same component twice into the same HTML tag.
In the demo, what happens is that typing the first character triggers a change in the
test. When an attribute is changed for the first time, the
component is replaced with a new instance.
I've filed a bug here: https://github.com/vuejs/vue/issues/7795 – But it seems this is working as intended. There are probably some use cases for shadowing components… but I can't think of one.
Be careful of this mistake.