bug(mat-checkbox): Wrong appearance when inside a disabled fieldset
Open
Nobody has claimed this yet.
area: material/checkbox
P3
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
The material checkbox is not styled correctly when inside a disabled fieldset.
The appearance should be the same as when outside a fieldset:
Reproduction
StackBlitz link:
Steps to reproduce:
Expected Behavior
- When checked, a grey background within the tick box
- The font color is light gray
- Not clickable (disabled)
Actual Behavior
- When checked, no background within the tick box
- The font color is black
- Clickable. Possible to change checked state.
Environment
- Angular: 16.0.0
- CDK/Material: 16.0.3
- Browser(s): Chrome, Firefox, Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and compare the checkbox behavior inside and outside a disabled fieldset in Chrome, Firefox, and Edge. Done means the checked box has a grey background, the text is light gray, and the checkbox cannot change state when its fieldset is disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100