<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/anon/pen/ZZvVWv" rel="nofollow">https://codepen.io/anon/pen/ZZvVWv</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">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:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new Vue({
  el: '#app',
  template: `
  &lt;div id=&quot;app&quot;&gt;
    &lt;div v-if=&quot;open&quot;&gt;Hello&lt;/div&gt;
    &lt;input key=&quot;input&quot; ref=&quot;input&quot; @focus=&quot;open = true&quot; @blur=&quot;open = false&quot;&gt;
    &lt;div v-if=&quot;open&quot;&gt;World&lt;/div&gt;
  &lt;/div&gt;
  `,
  data: {
    open: false
  }
)"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">el</span>: <span class="pl-s">'#app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`</span>
<span class="pl-s">  &lt;div id="app"&gt;</span>
<span class="pl-s">    &lt;div v-if="open"&gt;Hello&lt;/div&gt;</span>
<span class="pl-s">    &lt;input key="input" ref="input" @focus="open = true" @blur="open = false"&gt;</span>
<span class="pl-s">    &lt;div v-if="open"&gt;World&lt;/div&gt;</span>
<span class="pl-s">  &lt;/div&gt;</span>
<span class="pl-s">  `</span><span class="pl-kos">,</span>
  <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">open</span>: <span class="pl-c1">false</span>
  <span class="pl-kos">}</span><span class="pl-kos"></span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">Now click the input to try and focus it.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The two conditional elements appear, the input is focused.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">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 <code class="notranslate">key</code> is there to ensure.</p>
<hr>
<p dir="auto">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.</p>
<p dir="auto">Experienced real trouble migrating to Vue 2<br>
because:</p>
<h2 dir="auto">#Duplicate Slots removed</h2>
<p dir="auto">How it works in Vue 1.x<br>
<a href="https://jsfiddle.net/Yenisey/hchx3v1o/" rel="nofollow">https://jsfiddle.net/Yenisey/hchx3v1o/</a></p>
<p dir="auto">Consider, there must be API method, or some other way to clone this.$slots.default</p>