fix: ad1b77dd 将Radio改为完全受控后，原来的input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。#1
Open
Starrah wants to merge 1 commit intoMuNET-OSS:mainfrom
Open
fix: ad1b77dd 将Radio改为完全受控后，原来的input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。#1Starrah wants to merge 1 commit intoMuNET-OSS:mainfrom
input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。#1Starrah wants to merge 1 commit intoMuNET-OSS:mainfrom
Conversation
审阅者指南（在小型 PR 上折叠）审阅者指南将单选按钮样式选择器更新为依赖由 Vue 控制的 在修复 CSS 选择器后，受控单选按钮点击与样式更新的时序图sequenceDiagram
actor User
participant Browser
participant VueRadioComponent
participant DOMInput
participant CSSEngine
User->>Browser: Click radio input
Browser->>VueRadioComponent: dispatch click event
VueRadioComponent->>Browser: event.preventDefault()
VueRadioComponent->>VueRadioComponent: update internal checked state
VueRadioComponent->>DOMInput: set attribute checked=true
DOMInput->>CSSEngine: notify attribute change
CSSEngine->>DOMInput: apply styles for input[type=radio][checked]
DOMInput->>User: show checked visual state
文件级变更
提示和命令与 Sourcery 交互
自定义你的使用体验访问你的 控制面板 以：
获取帮助Original review guide in EnglishReviewer's guide (collapsed on small PRs)Reviewer's GuideUpdates the radio button styling selector to rely on the Vue-controlled Sequence diagram for controlled radio click and styling after CSS selector fixsequenceDiagram
actor User
participant Browser
participant VueRadioComponent
participant DOMInput
participant CSSEngine
User->>Browser: Click radio input
Browser->>VueRadioComponent: dispatch click event
VueRadioComponent->>Browser: event.preventDefault()
VueRadioComponent->>VueRadioComponent: update internal checked state
VueRadioComponent->>DOMInput: set attribute checked=true
DOMInput->>CSSEngine: notify attribute change
CSSEngine->>DOMInput: apply styles for input[type=radio][checked]
DOMInput->>User: show checked visual state
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Starrah
changed the title
input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request modifies the radio input styling in the dynamicLight theme by replacing the :checked pseudo-class with the [checked] attribute selector. Feedback indicates that this change may break compatibility with native radio inputs and Vue-managed components, as the attribute selector does not track state changes that only update the DOM property. It is recommended to use both selectors to ensure consistent behavior across different environments.
| border-color: oklch(0.68 0.17 var(--hue)); | ||
|
|
||
| &:checked { | ||
| &[checked] { |
There was a problem hiding this comment.
将 :checked 替换为 [checked] 可能会引入以下问题：
- 破坏原生 radio 兼容性：对于非受控的原生
<input type="radio">，浏览器在用户交互时仅更新其checked属性（property），而不会同步更新 HTML 属性（attribute）。这会导致[checked]选择器无法匹配原生组件的选中状态。 - Vue 动态绑定机制：在 Vue 3 中，
checked绑定通常作为 property 处理。如果 Vue 没有将更改同步到 DOM attribute 上（通常不会同步），[checked]选择器在动态切换时将失效。建议检查为什么:checked在受控模式下失效，通常只要el.checked属性被正确更新，该伪类就应当生效。
建议保留 :checked 并将 [checked] 作为补充以确保兼容性。此外，请检查项目中其他主题文件（如 src/themes/aquadx/components.module.scss）是否也存在类似的选择器需要同步修复。
&:checked,
&[checked] {![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我在这里提供了一些整体性的反馈：
- 如果应用中仍然存在任何未受控或原生的单选框（radio），请考虑在选择器中组合使用
&:checked和&[checked]，以避免回归问题（例如input[type=radio]:checked, input[type=radio][checked]），而不是完全用属性选择器替换伪类。 - 请确认在所有交互路径中（点击、键盘、以及通过代码进行的变更），Vue 都能一致地将响应式的
checked状态同步到 DOM 属性上，因为现在这段 CSS 依赖的是属性而不是伪类。
给 AI Agent 的提示词
Please address the comments from this code review:
## Overall Comments
- If there are still any uncontrolled or native radios in the app, consider combining `&:checked` and `&[checked]` in the selector to avoid regressions (e.g., `input[type=radio]:checked, input[type=radio][checked]`) instead of fully replacing the pseudo-class.
- Confirm that Vue consistently reflects the reactive `checked` state onto the DOM attribute in all interaction paths (click, keyboard, programmatic changes), since this CSS now depends on the attribute rather than the pseudo-class.帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈来改进之后的 Review。
Original comment in English
Hey - I've left some high level feedback:
- If there are still any uncontrolled or native radios in the app, consider combining
&:checkedand&[checked]in the selector to avoid regressions (e.g.,input[type=radio]:checked, input[type=radio][checked]) instead of fully replacing the pseudo-class. - Confirm that Vue consistently reflects the reactive
checkedstate onto the DOM attribute in all interaction paths (click, keyboard, programmatic changes), since this CSS now depends on the attribute rather than the pseudo-class.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- If there are still any uncontrolled or native radios in the app, consider combining `&:checked` and `&[checked]` in the selector to avoid regressions (e.g., `input[type=radio]:checked, input[type=radio][checked]`) instead of fully replacing the pseudo-class.
- Confirm that Vue consistently reflects the reactive `checked` state onto the DOM attribute in all interaction paths (click, keyboard, programmatic changes), since this CSS now depends on the attribute rather than the pseudo-class.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Author
|
以及另一种改法是 diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
--- a/src/components/Radio/index.tsx (revision b4675c5786c14fc2f67f02a00bd51e558b2a8003)
+++ b/src/components/Radio/index.tsx (date 1776053180733)
@@ -18,8 +18,10 @@
checked={props.value === props.k}
disabled={disabled.value}
onClick={(e: Event) => {
- e.preventDefault();
- if (disabled.value) return;
+ if (disabled.value) {
+ e.preventDefault();
+ return;
+ }
emit('update:value', props.k);
props.onClick?.();
}}
只在disabled的时候才 |
…io点击后无法显示被点击的状态。
Author
|
至于两个AI建议的 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
2026-04-13.11-42-09.mp4
此bug疑似由 ad1b77d 引入，它将Radio改为完全受控、通过Vue在DOM上设置的
checkedattribute进行控制，而不再使用的默认行为（将元素的.checked属性设为true）。原来的CSS选择器
input[type=radio]:checked，是一种伪类选择器，它匹配的是原生radio元素上定义的元素级checked属性。这个属性受浏览器自有逻辑控制，在用户点击等场合进行更新。然而，我们将Radio改为完全受控，并使用preventDefault()阻止了浏览器的默认行为后，checked就不会被更新了，所以:checked伪类选择器不会生效。本PR将
input[type=radio]:checked改为input[type=radio][checked]，完全基于vue代码层面控制的checked属性来决定显示。Summary by Sourcery
Bug Fixes:
checked属性（而非原生的:checked伪类）进行受控时，单选按钮能够在视觉上正确显示其选中状态。Original summary in English
Summary by Sourcery
Bug Fixes: