Elements lose focus on re-render when siblings use v-if, even if element is reused

[adamwathan]

Version

2.6.10

Reproduction link

https://codepen.io/anon/pen/ZZvVWv

Steps to reproduce

Create a component that contains a button or input sandwiched in between two other elements that are both conditionally rendered using v-if against the same piece of data:

new Vue({
  el: '#app',
  template: `
  <div id="app">
    <div v-if="open">Hello</div>
    <input key="input" ref="input" @focus="open = true" @blur="open = false">
    <div v-if="open">World</div>
  </div>
  `,
  data: {
    open: false
  }
)

Now click the input to try and focus it.

What is expected?

The two conditional elements appear, the input is focused.

What is actually happening?

The input is focused but immediately blurred, the component renders twice, and the conditional elements are hidden. It is impossible to actually focus the input. This is bizarre because the element is the exact same DOM node, you can confirm via logging, and that's what key is there to ensure.

---

This example looks silly but it's a real problem when you start trying to build things like autocomplete components, where you want to render an invisible clickable backdrop to add simple "click away" behavior (this is how GitHub does click away, it's the only bullet proof approach I've found especially when you start using portals as well) and you also need to render the autocomplete dropdown when the input is focused.

[dejour]

I will take a look this.

[Justineo]

Duplicate of #6929

[Justineo]

See also #9473, #9496, #9808.

---

where you want to render an invisible clickable backdrop to add simple "click away" behavior (this is how GitHub does click away, it's the only bullet proof approach I've found especially when you start using portals as well)

I think you can also listen to click events on document.documentElement and check if the event target is within the input or the dropdown overlay.

[dejour]

Problem is in the patching process. With current before and after vnode structure. updateChilden will
use insertBefore (this method will make current element or its children to lose focus) to move input vnode which will trigger input's blur method. Is there a appropriate way to handle this.

[Justineo]

@dejour Yes, it also causes <iframe>s to reload.