setSelected triggered on <select> by unrelated data object replacement #3504
Description
Vue.js version
2.0.0-rc.3 (or any 2.0 version)
Browser version
| Platform | Browser | Reproduces |
|---|---|---|
| OS X | Chrome 52.0.2743.116 (64-bit) | yes |
| Windows | Firefox 48.0.1 x64 | yes |
| OS X | Safari 9.1.2 (11601.7.7) | no |
| Windows | Chrome | no |
| Windows | Edge 38.14393.0.0 | no |
(Windows tests performed by @fnlctrl)
Reproduction Link
http://jsfiddle.net/jingman/85b96530/2/
Steps to reproduce
- Make a
<select>element and give it av-model. - Make an object in
data, give it a property, and render that property on the page. - Replace the
dataobject, and you'll see (by recording and inspecting the timeline) that Vue'ssetSelectedfunction is being called, even though the model and options for that element have not been touched.
What is Expected?
Nothing should happen. setSelected should not be called, since that element's model is untouched.
What is actually happening?
It seems that in some browsers, if any object's property is being rendered to the page (bar.name in my fiddle), and that object is replaced, setSelected will be called, and the <select> will be repainted, even if its model is untouched. This causes an open select menu to flash. In this example I'm replacing the unrelated data object every second:
If you just change the prop, it doesn't trigger the re-render.
This issue is present in all rc and beta versions of Vue 2.0 (for OS X Chrome).
It is not present in Vue 1.0.26. http://jsfiddle.net/jingman/og2b6uub/1/