onChange handler for radio buttons does not fire according to spec.

[EamonNerbonne]

As described on http://facebook.github.io/react/docs/forms.html, the onChange handler of an input should fire when the checked state changes. However, it actually fires when the radio button is clicked,

In other words, it fails to fire when a checked radio button is unchecked (by checking a different radio button), and it fires even without a state change when a checked radio button is clicked.

In short, it's missing checked transtions true->false, and it's reporting spurious transitions true->true.

[sophiebits]

I believe it's intentional that it doesn't fire for true->false (because you really only want one event) but the true->true should not be counted. Essentially you're getting a change event for the radio group rather than for the individual radio button.

[EamonNerbonne]

I guess that makes some sense (I'm not sure it's ideal, but it's what the DOM does too...), but in that case the docs aren't accurate (and the true->true issue remains).

[sophiebits]

Agree. If someone wants to tackle this, it would be nice if "changing" from checked to checked didn't trigger an onChange event. I'm also happy to accept a docs PR to make the expected behavior clearer.

[sophiebits]

@gaearon Interested in taking a look at this one?

Right now ChangeEventPlugin fires an onChange event for every click that it receives from the browser (for both checkboxes and radio buttons). My guess is it's necessary to track the current value when the focus event is triggered, sort of like we do for activeElementValue in old IE. Not sure how tricky it will be to solve. (http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html explains approximately how the onChange event currently works for text inputs.)

[gaearon]

@spicyj Yup, I'm interested. I can take a look closer to the weekend, OK?

[sophiebits]

Sure, no rush.

[Anenth]

Onchange is not triggered when there is a change from true->false

[itrelease]

@spicyj can't we just add

if (this.props.type === 'radio' && this.state.checked) {
  return;
}

in _handleChange method?

[sophiebits]

@itrelease No – at the point that handleChange is called, the checked value has already changed and we do want to fire the onChange event if a radio button becomes checked.

[EtaiG]

Hi,

I encountered this issue as well - it still happens.

jsfiddle- native html, vanilla js: https://jsfiddle.net/etai/yfsmqsqo/2/
jsfiddle- react 0.13.1 - http://jsfiddle.net/etai/5pcht4ap/2/

on each, select a radio, then select one which is already selected.

Any idea when this will be fixed?

This forces us to abort the onChange when 'this' radio is the selected value, which is just ugly..

[gyzerok]

@spicyj Can you give a starting point to dive into this? I'd like to try this as my first PR for React.

[EtaiG]

@gyzerok I have a fix for this, but unfortunately it's nearly impossible to write tests for react. It was a nightmare, I spent over 12 hours just trying to get it working, even with help of some people on the react IRC channel, with no success.

[sophiebits]

@EtaiG Sorry for the delay. If the change is simple, we can take it without tests and if it's complex, maybe I can write some. Do you want to post a PR with your code as it is now?