problems with v-model and <select size=N>
Version
3.0.11
Reproduction link
Steps to reproduce
When using v-model with a <select size=N>, any re-rendering causes the selection to reset from whatever the mouse is currently clicking on, causing it to be glitchy and unreliable. Note that mobile browsers seem to ignore size so you'll see it only on desktop browsers.
The linked reproduction uses a timer to change a counter unrelated to the <select>. You'll notice that clicking on any items in the selection list box doesn't work, unless the click was fast enough to happen between counter updates.
What is expected?
User should be able to change selection freely
What is actually happening?
Vue keeps changing the selection back away from what the user is trying to click on
Noticed on Vue 2, upgraded project to Vue 3 with same results.
1
As a workaround you can isolate the select in a component
As a workaround you can isolate the select in a component
That worked, thank you!