Input bound to data loses focus in slot when preceded and followed with v-if

[ghost]

Hi,

I found what I believe to be a BUG.

In the following code (App component), simplified voluntarly, we have an input preceded by a div containing a v-if and followed by an other div containing a v-if. The input is bound by v-model to a simple data. The whole thing is under a component Form that only wrap the content with a div and a slot.

At the first keydown in the input, the focus is lost.

If I remove one of the div before or after where a v-if is applied, there's no problem. If I wrap the the two divs containing v-if and the input in a div, also no problem is encountered.

<div id="app"></div>

Vue.component('Wrapper', {
  template: "<div><slot></slot></div>"
})

Vue.component('App', {
  template: `<Wrapper>
    <div v-if='false'></div>
    <input type='text' v-model='mod'/>
    <div v-if='false'></div>
  </Wrapper>`,
  data () {
    return {
      mod: null
    }
  }
})

new Vue({
  el: '#app',
  template: '<App/>'
})

Here is a JSFiddle where you can test this.

Thanks for your feedback.

[AlexeyKot]

Faced the same bug with the latest vue.js stable build when tried to copy the first lesson from "Majesty of Vue.js 2" book. https://jsfiddle.net/AlexeyKot/y5ed8g51/ If you empty textarea - you'll see a heading appearing and the button disappearing. What frustrates me - when you start typing anything in the textarea again, the focus will be lost after the first typed character. Currently both heading and button use v-if to toggle its visibility. But if you change any element from v-if to v-show - the focus in textarea will be ok all the time

[sustained]

Also in the above Fiddle, as in the original issue, if you remove some elements above/below and make it so that the textarea is the first-child or the last-child then the issue goes away entirely.