A deadly trap in Vue: shadowing components

13 Mar 2018

Over the weekend, I was debugging a strange issue on my site built with Vue.js.

There is 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 attribute 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.