Custom Directive. Inserted hook. Element moved after inserted hook ended.

[jacobgoh101]

Version

2.5.3

Reproduction link

https://jsfiddle.net/jacobgoh101/y1L2v9d4/

Steps to reproduce

1. Click show button

What is expected?

input#timing should be focused

What is actually happening?

input#timing was focused, but something else cause it to blur immediately

---

Bug discovered from this Stack Overflow question together with acdcjunior.

from this example https://jsfiddle.net/acdcjunior/srfse9oe/1/ , after clicking on show button, the console log these

beforeUpdate

inserted <div id="app"><div><p>a</p> <input type="number" id="timing"> <p>b</p> <button type="button">show</button> <p>c</p> <!----> <p>d</p></div></div>

updated

nextTick <div id="app"><div><p>a</p> <!----> <p>b</p> <!----> <p>c</p> <input type="number" id="timing"> <p>d</p></div>  </div>

in inserted hook, input#timing is between <p>a</p> and <p>b</p>. But in nextTick callback, input#timing has been moved to between <p>c</p> and <p>d</p>, for no particular reason. This caused the element to blur out.

See more details in this SO answer

[posva]

Seems related to #4362

The element gets moved more than necessary causing it to blur out, but I wonder if inserted could be called at the end rather than exactly when inserted...

As a valid workaround, you can do Vue.nextTick(() => el.focus()) to focus the element

[jacobgoh101]

Vue.nextTick(() => el.focus()) does work. Confirmed.

[yyx990803]

This is because in your case the same input element was reused, and the inserted hook fired before it was moved.

Technically, the diffing could probably be improved since there no need to really move it, but this cannot be guaranteed in all cases when no keys are provided, so it's safer to always do focus in a nextTick.