Adding an input event listener to a <form> element makes it so <select> doesn't respond to the first change you make.
Vue version
At least 3.2.47 through 3.3.4
Link to minimal reproduction
Steps to reproduce
- Try to change the
<select>
value to something else. - Notice it doesn't keep the option you selected, it reverts to its initial value.
- If you try to change it again, it finally works.
What is expected?
Changing the <select>
's value should work the first time, regardless of whether the <form>
element has an input
event listener on it.
What is actually happening?
The <select>
element only accepts changes after the first try.
System Info
System:
OS: Windows 10 10.0.22621
CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
Memory: 25.60 GB / 63.93 GB
Binaries:
Node: 18.15.0 - C:\nodejs\node.EXE
Yarn: 1.22.19 - C:\nodejs\yarn.CMD
npm: 9.5.0 - C:\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1778.0), Chromium (114.0.1823.41)
Internet Explorer: 11.0.22621.1
npmPackages:
vue: ^3.2.47 => 3.2.47
Any additional comments?
Seems to only occur in Chromium browsers.
This is caused by the form's input event being executed earlier than the select's change event.
- The first time the select is selected,
changed=true
causes the component to be re-rendered and the select is reset. When the select's change event (v-model is based on the change event) is executed select is already back to its initial state. Sochosen
is not changed. - Then the
changed
is still true, the component is not re-rendered, and the v-model works normally.
As you said. you should use the form's change event instead.