Skip to content

Same-name shorthand (:type) breaks radio group behavior #13169

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.

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

Open
alexchexes opened this issue Apr 7, 2025 · 0 comments · May be fixed by #13170
Open

Same-name shorthand (:type) breaks radio group behavior #13169

alexchexes opened this issue Apr 7, 2025 · 0 comments · May be fixed by #13170
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: compiler scope: v-model

Comments

@alexchexes
Copy link

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNrlVcFuGjEQ/ZWRT0QK0KQ9uSRSU3FoUUOURD1Zqja7XmritS3bS0Fo/71jm12WhiC1x+bCembejJ+fx8OWfDJmtKo5oWTiciuMB8d9ba6ZEpXR1sMWLC+hgdLqChhBLCMfu+ijXixk9iT5Te29Vj/msxY4Gr+MhZ1OZd/cz2fT29crpHhXhalcK+chr63lyn/PZM3hKvAdqFrKsx5EGy9wMX9a8twjZssUAJbm8oKGU4XUC0bOO/dl576M7gaLTcZJIhQHDc8rIzPP0QKYVJlQcYXrQqyu+5wobLeHJJtmMg6oUCimOKSFBHcVAOYz2sZ2BVsDzZfC7oMAq2Gp7RUjg8j+HJ755gyEOpSAkX4KRQxm4O+hfzWsdMElhvrs/8iNch3LppEARuL3MOY3JkRsVgjdj4y7c7YCpfVen1cES63xF6KlhDckXLB2XToZ95oXTec3Miyp1RpffMCWWvlhmVVCbii4TLmh41aU+AoapkKZBCuEwzoIKSVfYxATcTEshE37Usi1rCsVQ4vMULh4ZwIQqyC53b7knHiHD7UUi9HSaYXTKFZH+XRlhOR2nu6AEXxL6WiMZFLqX1+jz1u8sNaf/+T58xH/0q2Dj5E7y/EwK1S2i/nMLjhebghPH275GtddEO+ylog+EbznDs8ZOCbYTa0KpN3DRbZf4twTavHopmvPlWsPFYgGZBPxccx+PnH0Pd33ow8xDxVFFY+P3CPDveClUPzOauMG+1lI4cFbZBdJhE47cMRupBBGaxiI/fEaux3Hair7LViD7a5CwENEn5qfcf+2a4Uyte89ovhlBOiu+8MnmJFRbP2UiGM21sH5mvq9rXrQ8Ed02v+x/F9a/bNEzW/E86KX

Steps to reproduce

  1. Open the linked playground and look at the two components: TogglableButton_OK.vue and TogglableButton_BROKEN.vue.
  2. In TogglableButton_OK.vue, the input's type is bound explicitly using :type="type".
  3. In TogglableButton_BROKEN.vue, the same-name shorthand :type is used instead.
  4. Try switching radios (click ⊚ label1 then ⊚ label2) in the first section (named "OK"). Then, either reload the page or not, and try switching radios in the second section (named "BROKEN").

What is expected?

  • When you click the label1 radio button, it should be checked and update currentValue to 'value1'.
  • When you click the second radio button, it should check the second and uncheck the first, updating currentValue to 'value2'.
  • The behavior should be the same for both components: TogglableButton_OK.vue and TogglableButton_BROKEN.vue

What is actually happening?

With the same-name shorthand :type attribute binding:

  • Clicking the first radio button checks it visually, but currentValue remains null.
  • After clicking the second radio button, both buttons appear checked - even though they're in the same radio group.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 25.89 GB / 63.67 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.80)
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

In the linked Vue SFC Playground Reproduction, compare TogglableButton_OK.vue with TogglableButton_BROKEN.vue. The only difference is in how the :type attribute is bound.

@edison1105 edison1105 added scope: compiler scope: v-model has workaround A workaround has been found to avoid the problem 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem scope: compiler scope: v-model
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants