problems with v-model and <select size=N>

[jimparis]

Version

3.0.11

Reproduction link

at sfc.vuejs.org

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.

[posva]

As a workaround you can isolate the select in a component

[jimparis]

As a workaround you can isolate the select in a component

That worked, thank you!