Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radio input element's checked value not synced with props checked. #10929

Open
xuyimingwork opened this issue May 13, 2024 · 4 comments · May be fixed by #10989
Open

Radio input element's checked value not synced with props checked. #10929

xuyimingwork opened this issue May 13, 2024 · 4 comments · May be fixed by #10989

Comments

@xuyimingwork
Copy link

xuyimingwork commented May 13, 2024 •
edited

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNqVVGFr2zAQ/SuHv8QB1yHZYBCSsq2UrRs0ZSvsQ2yGap8TdbZkZNlNCfnvO0mWm5AR2IcQ6b13p3enk/fBp7qOuxaDebBoMsVrDQ3qtoaSic0yCXSTBNeJ4FUtlYY9KCwieGE628IBCiUrGFH0KBGJyKRoNHSsbBGWRhiOKHmJo7HnZK05LXp2nQiAXhKB3dxsUanXfjeZwOiLYrVnzX6lyNYx8IBMHW1/MY2qwlIKspTSwYmwZkNrK4JQRCDHsLyGfR+y+g6soCDQvELZ6h6mJjw6IAytvnlh9cr5d0kouVXerx5NEnKOBjnTJeJgfRStyAx8ouimc2DiNYJuZhdj58u0S5YYl3ITjhrNqPUmynQSfBdj32nDhIYAWMdxfEKnkSNOwLjgIr8TOe5CrrEy1bn/5RK66fi/Q2bWlin0rM6QKWULW6cRcCpWtNUTKlpTvW7dl7wm5ZrPSGYX0zSl0hw49eAsTY1U0YAqYaD+yH66RLY100Fx1uTbNZ+0c8s325J+GrSkybFKI3J1+qYa2GZfTNyzoEdAG0LrkmaMdgCLnHfX/U3OYb8f5vtwWEwMN4horrM/mFuRO+FM8nWwRZ3GHTRb2ZY5POFx5ovXYPKOTxNzUbuJpvKuCqnoQVs9Fz5jEjhav9ZIrGI5lx6bZ862jxpO8QLBKhPEnrIhJGeaXVlRH+WZj+5yCPX35C7J8RPr13T7qMNBRJ8furuCb+LnRgr6RtnrTIJMVjUvUfXNTwJqkjuG3JSlfPlmMa3ozXvcFvMP/LnZGSwJHhQ2qDqqbuDo5W1QO/r25z3uaD2QlczbktQXyB9Ic9caj072uRU52T7SWbd39uvKxeaxud1pFI0vyhg1yoPVJwF9am8ulP5m91383sbRCFMXf3eoTE5qIBHx7ENw+AvKk/a9

Steps to reproduce

  • open reproduction link
  • click second radio input

What is expected?

  • the second radio should not been checked

What is actually happening?

  • the second radio checked => not match the value & element's prop.checked

System Info

No response

Any additional comments?

This will cause the second radio can't trigger change event, since the real element checked is true but data value is not, which is not we want.

Issue below is trigger by this problem:
element-plus/element-plus#16497
@xuyimingwork xuyimingwork changed the title Input element's checked value not synced with props checked. Radio input element's checked value not synced with props checked. May 13, 2024
xuyimingwork added a commit to xuyimingwork/vue-core that referenced this issue May 13, 2024
@xuyimingwork
fix(runtime-core): force patch radio input checked prop (vuejs#10929)
c40998b
xuyimingwork added a commit to xuyimingwork/vue-core that referenced this issue May 14, 2024
@xuyimingwork
fix(runtime-core): force patch radio input checked prop (vuejs#10929)
8140922 
Closes vuejs#10929
xuyimingwork added a commit to xuyimingwork/vue-core that referenced this issue May 14, 2024
@xuyimingwork
fix(runtime-core): force patch radio input checked prop (vuejs#10929)
320544e 
close vuejs#10929
@xuyimingwork xuyimingwork mentioned this issue May 14, 2024
Closed
@Shyam-Chen
Copy link
Contributor

https://eslint.vuejs.org/rules/require-v-for-key.html

@xuyimingwork
Copy link
Author

https://eslint.vuejs.org/rules/require-v-for-key.html

https://play.vuejs.org/#eNqlVW1r2zAQ/iuHv8QBz5mzwSAkZVspWzdoylbYh9gM1VYSdbJkZNlNCfnvu5PsNKajbOuHEOm5507PvUjeBx+qKm4bHsyCeZ0bUVmouW0qkExtFmlg6zQ4S5UoK20s7MHwdQT3zOZbOMDa6BJG6D1KVapyrWoLLZMNhwURwxEGl3w07m26sgIXnXWVKoCOEoHbnG+5MQ/dbjKB0SfDqt5K+6VBWafANWfmZPuDWW5KLrVCSRkenConNnSyIghVBHoMizPYdy7Lr8DW6ARWlFw3toOxCDceCEPHr+9ZtfT6fRAM7phXyxsKgso5IU94qTo4HetG5QQPGG0yA6YeIminbjH2uqhcWvJY6k04qi3D0pMXVRL6KsZ9pckSkgFgFcfxwJxF3jAA47VQxaUq+C4UlpeUnf9fLKBNxv/sMnWyKNEneYbMGJfYKotAYLKqKW+5wTXm69ddyitkrsQUaW6RZBmm5sGkB6dZRlSDA2oUQd2R3XSpfEvTgX5O5GObB+Xcis1W4s+C1Tg5jkkkn2dfVIJd9PnEXwu8BLhBtJI4Y7gDmBeiPes6OYP9/jjfh8N8QrYjCec6/8ULR/InPKF8PsrCSvMd1FvdyAJu+WnkZ9tAccfDwEJVfqIB7EPF8T4bVgidBh6b5V4X4t0Bq9dY9j5YT1OsJFd2mx8dC2bZK0ca+Pb2974TZOuaEj6Sxp41+V+JyQskJn8jMRlKpBk46XsQ4aOIE7UWm/iu1gpfTjdkaZDrshKSm24k0gBb5w9DZVLq+y8OswZfoh536f0Bv6t3hKXBteE1Ny1merThe7Dh1psvvl/xHa6PxlIXjUT2M8ZvHG9DQxo97WOjCpR9wnNqL92bL9Tmpr7YWa7qPikSSsyD46cBfgDOn0n9Ue6b+K3zw4uFVfzZckMxsYBoiKfvgsNvOgonvA==

@Shyam-Chen Still exist when not using v-for.

I know we can use key to force refresh element, but using key is recommend rule not forced rule.
Not using key should only effect app's performance then wrong display.

The original trigger of this problem is element-plus/element-plus#16497, the v-for is inside component and using index for v-for's key to render a radio list.

Component user only need pass array to component, and in his use case cause wrong display.

@Shyam-Chen
Copy link
Contributor

Shyam-Chen commented May 22, 2024 •
edited

For workarounds:

watch(
  value,
  (newVal, oldVal) => {
    swapOptions(newVal, oldVal);
  },
  { flush: "post" },
);

Or use v-model:

https://play.vuejs.org/#eNqtVM2O0zAQfpWRT6kUUlo4laYSrFZiOQACbnEOaeK2XhI78k/aKsq7M7aTbqtFi4T2EGlmvm9+PZOefGzbpLOMrMhal4q3BupC7FNKjKYENDO23VDBm1YqAz0otovhWJjyAAPslGyAEnSn5AMVVJRSaANdUVsGqeNG1CWoEZ8hIcCyNRyFkZBdGDGGujswpc6U5I5OhU8U+XgxRCIGOYN0Az0VAPpYtN9CqICgxxDcdlaUDrjhdIsVFOIcQ7f0wiyEGatJpqKdS+QAgCxJkhs4jwNwY0x2XFQPomKnKOKGNb5CJ0CaptAtZv/htAxOvqVnDUWFUr6DLI+BY1fCNlumUMbGgjz2liEz40ukeWGR59hgMC4m4zLPMQvgWxirhLOFpOt5WAd8fFSwsrYuDEMNYF3xbjOOdQV9f3nRYVjPHXYh4XOWv1nlSWHAzyhhOJ/5/lDjZwDnwk6gD9LWFWzZdfx/DM3Fn2ECH/opCRetxZ1808iK1bjXnoerbc4tQ1UVFZeoiqJxarEtUVl5Eqpj5uxtjtb5KwZcTAHX86vZkhjPDq9kx/fJo5YCr9I/JCWlbFpeMzWOnRIcTBgdpqhrefzibUbhpUz20k3/L/ZHfXI2Sr4rppnq3O1NmCnUnpkA3//8yk4oX0Ds2LpLfQH8wbSsrasx0D5ZUWHZVzxf7YP/n3Cx/6XvT4YJPTXlCnXMwfP9v+Xuhdafyn2XvPd+uLxk+APOsp0S

@Shyam-Chen Shyam-Chen linked a pull request May 22, 2024 that will close this issue
Open
@Shyam-Chen
Copy link
Contributor

https://deploy-preview-10989--vue-sfc-playground.netlify.app/#eNqlVd9v0zAQ/ldOeWkqhZQUnqp2AqYJBtI6wSQemjx4idt6OHbkOFmnqv87d3bSNRqqgD1Utb/77vzdDzv74GNVxW3Dg1kwr3MjKgs1t00FkqnNIg1snQYXqRJlpY2FPRi+juCR2XwLB1gbXcIIvUepSlWuVW2hZbLhsCBiOMLgko/GvU1XVuCis65SBdBRInCbyy035qnbTSYw+mxY1VtpvzQo6xS45cycbH8yy03JpVYoKcODU+XEhk5WBKGKQI9hcQH7zmX5DdgancCKkuvGdjAW4c4DYej49SOrll6/D4LBHfNmeUdBUDkn5AUvVQenY92onOABo01mwNRTBO3ULcZeF5VLSx5LvQlHtWVYevKiSkJfxbivNFlCMgCs4jgemLPIGwZgvBaquFYF34XC8pKy8/+LBbTJ+J9dpk4WJfoiz5AZ4xJbZREITFY15T03uMZ8/bpLeYXMlZgizS2SLMPUPJj04DTLiGpwQI0iqDuymy6Vb2k60M+JfG7zoJxbsdlK/FmwGifHMYnk8+yLSrCLPp/4a4GXADeIVhJnDHcA80K0F10nZ7DfH+f7cJhPyHYk4Vznv3jhSP6EF5QvR1lYab6DeqsbWcA9P418tg0UdzwMLFTlJxrAPlUc77NhhdBp4LFZ7nUh3h2weotl74P1NMVKcmX3+dGxYJa9caSBb2//4DtBtq4p4TNp7FmT/5WYvEJi8jcSk6FEmoGTvgcRPoo4UWuxiR9qrfDldEOWBrkuKyG56UYiDbB1/jBUJqV+/Oowa/Al6nGX3h/wh3pHWBrcGl5z02KmRxu+Bxtuvfnqxw3f4fpoLHXRSGSfMX7neBsa0uhpnxpVoOwTnlN77d58oTZ39dXOclX3SZFQYh4cPw3wA3B5JvVnue/i984PL1Zw+A1QkCI9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@Shyam-Chen @xuyimingwork