Radio buttons are not correctly checked when using multiple lists of radio buttons

[atimmer]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When there are two lists of radio buttons and they are conditionally shown the correct radio button isn't always checked. In the provided JSFiddle I have created two lists and put a button before them to toggle between the two lists. You can see when switching to the second list of radio buttons none of the radio buttons is checked even though the second one should be checked based on the state.

What is the expected behavior?

The correct radio button should be checked. The following JSFiddle shows the behaviour with React 15.3.0 where it still worked: https://jsfiddle.net/atimmer/Lzjs56sn/1/.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

✅ React 15.3.0: It works.
❌ React 15.3.1: It is broken.

[aweary]

Thanks for the report @atimmer, that does seem to be a regression somewhere. I'll take a look at it.

[atimmer]

I had done some debugging prior to reporting this and it seems to be caused by the way the radios are updated. The radios in React 15.3.1 are updated in the DOM by first updating the attributes (name, id, etc) and then updating whether they are checked or not. So when going from a list where the third radio is checked to a list where the second one is checked the following happens:

1. The first radio is updated, nothing of note happens.
2. The second radio is updated, now the second and the third radio are both checked, but they have different names.
3. The third radio is updated, in updating the attributes the browser detects that there is already a radio with the same name and unchecks that one, the second radio button. Then the third radio is unchecked because the React state has the radio as unchecked. Now no radios are checked.
4. The fourth radio is updated, nothing of note happens.

[syranide]

Keying solves the problem, this is probably a problem with the input not realizing its name has changed/handling it correctly?

[aweary]

@atimmer yupp, that's about what I'm seeing as well. I verified this occurs on master too. Keying is probably your best bet as a workaround for now. I'm going to see what exactly caused this regression from 15.3.0 to 15.3.1.

[shuai-z]

#7333 I guess? by moving ReactDOMInput.updateWrapper(this); (only set checked here) after this._updateDOMProperties(lastProps, nextProps, transaction); (update id, name, checked in order).

so another workaround is to put checked before name property, don't trust me 😄

[landvibe]

@aweary
I'm using shuai-z`s solution. It works well.
I wonder if React v16 has the same issue or not.

[gaearon]

This is still an issue in React 16.