Skip to content

Bug: input[type="radio"] controlled value can get out-of-sync #19860

@eps1lon

Description

@eps1lon

React version: 16.13.1 and 17.0.0-alpha.0-2d131d782

Steps To Reproduce

  1. Render two input[type="radio"][name="radio"]: one is checked, one isn't
  2. Get warning about passing onChange or readOnly
  3. Add empty onChange to both

Link to code example:

The current behavior

screencapture of the described behavior

  1. React recommends readOnly for input[type="radio"] even though this isn't supported natively (though React could polyfill it)
  2. 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" />.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions