Adding an input event listener to a <form> element makes it so <select> doesn't respond to the first change you make.

tylerc commented 1 year ago

Vue version

At least 3.2.47 through 3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9U0GO2zAM/AqrS1ogtoFuT4Y3yO4+oMce6h7UmE7U2JIgUdkGhv9eylJSIwUKBLbImQyHFD2JF2vLS0BRi8YfnLK0azX+tsYRdNjLMBBMrQboJMmPn9IZwCEFp28RwOFk1AF9Dd83L5stbF7j423zY7sieNQ1RPhvTuojdjX0cvCY03N88YN/TXV3xAHhaAdJyBFAY5cXwNtNY5qy3LwoNFVirIjJQOTF0wPtQ1FwFWrp2wk10El52CttA8GgPKFGB5yyDvmvxDhC43HAA+2gM+hBG4JgeUi4gL1ynmlqxDLJftXDFWRPrBPxz7oDctc0AqWPSzIJwkUOAZOqIjgaxpwJx1NWemVPqoerCTDKcywXvabmQWk2K7st4AXdlSGWfjfu7NmRTl6KInXcGzfmHp9bkYcHz2wrYCvy1HKTcClG0+GwEOP07oSWGmNJGc0UVkwEXgUw/W0pWgH1Ga93KMZLj6vMbpoyHea5qZLkUoILVHnS6cKibz421X0hxFaoMW5sMUpb/vJG8zYvq9lmgD3wzWfHgtc9xq04EVlfV1XQ9nwsD2as9oxVLuh4c0Vnxv1T+VR+qTregXW6RD8WP5159+i4YCvy8i7abNfx9AuHukOH7r+1Hrjreg/QPzVvH4qY/wB360d1

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.

edison1105 commented 1 year ago

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. So chosen 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.

Alfred-Skyblue commented 1 year ago

During the triggering process of the instruction, the updated hook of the component is triggered, thereby triggering the updated hook of the instruction, causing the instruction update to be reset. This has been fixed in #8639.

vuejs / core