Radio buttons not working correctly

[chenglou]

 render: function() {
 return (
 <div>
 <input type="radio" name="fruit" value="A" checked={true}/>A
 <input type="radio" name="fruit" value="B"/>B
 </div>
 );
 }

Expected behavior would be for A to stay checked when B is clicked, but it's not the case.

jsFiddle

Similarly, here's a modified version that works on every subsequent click on B, but not the first time. If this helps, setting a timeout 0 around this.refs.A.getDOMNode().checked = true works (except it gives a flash when you click on B, which is less than ideal)

[sophiebits]

This happens because the change event never triggers on A, only on B -- React doesn't get a chance to restore the checked state.

[zpao]

Paging @yungsters.

[yungsters]

For lack of a better place to put this fiddle: http://jsfiddle.net/KfqXH/1/

I spoke with @spicyj on IRC. There will be issues if you have:

• Radios rendered in React with name="X".
• Radios rendered outside of React with name="X".

This is an edge case we don't think needs to be handled (partly because there might not be a way for some browsers to even detect if an arbitrary <input>'s checked property gets set).

A simple way to deal with this involves maintaining a list of all instantiated React radio inputs. Whenever one radio input's value changes, look for other radio inputs with the same name and scope and setState(...) as appropriate.

By scope, I mean inputs within the same form or not inside any form.