React: Input with type=radio incorrectly trigger onChange handler

[Bacher]

Bug.

If I put several input type="radio" with same name (as in jsfiddle example below) onChange handler triggered only once for individual input when mouse click on input happen.

<input type="radio" name="some" onChange={...} />
<input type="radio" name="some" onChange={...} />
...

Example: https://jsfiddle.net/Bacher/jxrar3ke/7/
Try to click on different radio inputs several times. Next clicks has no console.log output.

I expect trigger onChange every time when I click on non-selected radio input.

Bug reproduces in several latest versions of React, at least 15.6.0 and 15.6.1.
My OS is Ubuntu. I try in latest Chrome and latest Firefox.

[selbekk]

I don't see this as a bug, but as the expected behavior - if you need that behavior, write an onChange handler that triggers the behavior correct for your scenario based on which one was triggered.

[Bacher]

@selbekk I think you misunderstood me.

Try this scenario in my fiddle example:

• click on "1";
• click on "2";
• click on "1".

When you click "1" second time,onChange will not be triggered.

[selbekk]

Ah sorry, I did indeed misunderstand your question.

This is my theory:

When you click a radio button for the first time, you trigger its change event. However, when you unselect it (by clicking another radio button), you don't trigger one. This is because suddenly, the DOM keeps some state for you - but that's React's job (unless you want to use "uncontrolled components", which is discouraged in most cases). And since React does some nice trickery with events (they're synthesized to improve performance), this might be one of the issues that arises.

If you set the checked attribute and keep which choice is set in state, you'll have more luck :)

Here's a fork of your pen that does that: https://jsfiddle.net/npefL71p/

I agree it's a bit weird behavior

[Bacher]

Yes, I already fix my trouble by extract state, right as you write above.

I report this bug because I think using uncontrolled inputs is not a bad way. Sometimes it simpler :)

I think developers forgot case when input[type=radio] used as group select (in case with same name), however radio group is common way for past generation of web :)

[allanesquina]

Hey guys,I had a similar probelm here because I was using defaultChecked prop instead checked, after change to checked it's working again.

Thanks @Bacher @selbekk :+1:

[rhinoceraptor]

I am having this same bug in my app (it took me quite a while to narrow it down!).

This is a regression - this functionality seems to have been broken in version 15.6.0.

I have prepared two CodePens demonstrating the issue, one with version 15.6.0 (broken) and one with 15.5.4 (working).

To reproduce, click 1, then click 2, and then click 1 again.

[gaearon]

cc @jquense

[jquense]

Duplicate of #9988 I believe

[gaearon]

Thanks! Do you think you could look into this?

[jquense]

The problem is that DOMInputComponent doesn't update the value tracking bits in updateCousins for radios/checkboxes. It's a easy fix just haven't had a moment to PR something

[gaearon]

Seems like it was fixed with https://github.com/facebook/react/issues/9988.