Bug: input[type="radio"] controlled value can get out-of-sync
Open
Nobody has claimed this yet.
Component: DOM
Status: Unconfirmed
Type: Bug
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
React version: 16.13.1 and 17.0.0-alpha.0-2d131d782
Steps To Reproduce
- Render two
input[type="radio"][name="radio"]: one is checked, one isn't - Get warning about passing
onChangeorreadOnly - Add empty
onChangeto both
Link to code example:
The current behavior
- React recommends
readOnlyforinput[type="radio"]even though this isn't supported natively (though React could polyfill it) - After looping through the radios once with arrow key navigation the checked state changes
The expected behavior
Arrow key navigation shouldn't break out of the controlled value. It's debateable whether React should recommend readOnly when this isn't a standard attribute like readOnly for <input type="text" />.
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
No source file or test is named in the report. Begin with the linked React 16, 17, and 18 CodeSandbox reproductions, then trace the radio input handling that produces the controlled-state mismatch. Done means arrow-key navigation no longer changes the controlled checked value; the readOnly warning question remains part of the issue's discussion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100