Internet Explorer dynamically added select elements display first option by default

[fergaldoyle]

http://codepen.io/anon/pen/gMbPrj

Visit the above page in IE11 and you'll see two select boxes, both with empty initial values which is what we expect.

Click the show button to display two more select boxes (identical to the first two, but inside a v-if) and they will have initial values of AAA, which is bad.

Also the select element which is inside the test component gets an initial value of AAA. It seems that the select element needs to be in the DOM during page load for it work as expected. Anything added dynamically (inside a v-if or through component templates) gets an initial value which takes it out of sync of the underlying model.

I believe this happens only on Windows 8 & 10 (the select element is different from older versions of Windows).

[fergaldoyle]

Doing some local debugging, I found changing this line:

vue/src/directives/public/model/select.js

Line 42 in 3e1d70e

this.vm.$on('hook:attached', this.forceUpdate)

to:
this.vm.$nextTick(this.forceUpdate);

Solved the issue. From what I can see it doesn't break existing functionality.

A separate but related issue (in IE) is when a select element is moved (either the element itself or when it's a descendant of a moved element) within the DOM, even with the above code change, it will reset and present the same issue as above (displaying the first option instead of a blank).
e.g:

<div id="move">
   <label> Test
       <select v-model="selected">...</select>
   </label>
</div>
<div id="dest"></div>

document.querySelector('#dest').appendChild(document.querySelector('#move'));