<h3 dir="auto">Version</h3>
<p dir="auto">2.6.6</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/azg65dsv/3/" rel="nofollow">https://jsfiddle.net/azg65dsv/3/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Click the "Push" button and you will see that the focus of the window is now on the top input. Wait a few seconds, and should now see that the focus has been lost from the input.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The first input should still be focused.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The entire DOM is shifted around, new elements are created for no reason and changed, while the input ends up unfocused.</p>
<hr>
<p dir="auto">My setup is pretty similar to the fiddle, I have a loading bar at the top and an information box at the bottom. When testing it, however, a lot of weird things happened:</p>
<ul dir="auto">
<li>My custom directive didn't work properly because the underlying element was changed (this was actually my fault, I have now fixed it)</li>
<li>If I selected the input before data came, it lost focus</li>
<li>My custom button ripple animation got shifted around to a button at the bottom of the screen</li>
</ul>
<p dir="auto">After debugging a little bit, I found the issue. Vue thought that those divs were the same element when calling <code class="notranslate">sameVnode(oldEndVnode, newEndVnode)</code>. Adding a custom key into the second div works wonderfully, and no more DOM shifting, but I would like to be warned by the template compiler if something like this could happen (or maybe key all divs?).</p>
<h3 dir="auto">Workaround</h3>
<p dir="auto">Add a <code class="notranslate">key</code> to the first div that is not toggled.</p>
<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/timbenniks/pen/yPOLej" rel="nofollow">https://codepen.io/timbenniks/pen/yPOLej</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ul dir="auto">
<li>Add a <em>noscript</em> tag inside the DOM node that is given to the Vue constructor.</li>
<li>In that <em>noscript</em> tag, add an image tag.</li>
<li>Open the network tab of the developer tools.</li>
<li>Load the page.</li>
</ul>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The expected result would be that Vue.js ignores whatever is found in the <em>noscript</em> tag.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">That is actually happening: observe that Vue.js loads the image inside the <em>noscript</em> tag. Hence, Vue.js parses the <em>noscript</em> tag and whatever is found within it.</p>
<hr>
<p dir="auto">We found this issue as we are using Vue.js not in SPA mode but sprinkling it on top of existing HTML. When turning off the JS the page still renders HTML. The goal is to have lazy loading images and without JS we still want to see the images. Hence an image tag in a <em>noscript</em> element.</p>
<p dir="auto">This sounds like an edge case but in fact this is common usage for big e-commerce systems and cms' like Sitecore and Adobe AEM.</p>