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

[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:

• React 16 repro
• React 17 repro
• React 18 repro

The current 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" />.

[TedKoker]

Hello eps1lon.

I do not understand your bug..

JS does not allow "readonly" attribute for input[type="radio"], instead, you can add the "disabled" attribute if you do not want to allow the user change it.

What exactly are you trying to achieve?

[eps1lon]

JS does not allow "readonly" attribute for input[type="radio"],

I understand. But React is recommending it.

Secondly, the controlled value being lost is problematic if there's a delay between onChange and the value being registered (e.g. if a server is inbetween). Right now the only safe mode for input[type="radio"] is uncontrolled.

[ramyatrouny]

@eps1lon then adding disabled is your only optimal fix for your issue. adding a read-only has no add on or any enhancement for your request.

Anyway share React recommendation for the read-only input for extra validity

[eps1lon]

adding a read-only has no add on or any enhancement for your request.

I'm not asking for read-only. I'm showcasing how a controlled radio can become uncontrolled/out-of-sync in todays react.

React recommending read-only for checkbox/radio is a separate issue.