Regression: onChange doesn't fire with defaultChecked and radio inputs

[ThisIsMissEm]

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

What is the current behavior?
In React 15.6.1, this behaviour is changed; In 15.5.4, it fires the change event reliably.

15.6.1 - https://codesandbox.io/embed/VPA42ZnRo
15.5.4 - https://codesandbox.io/embed/JZ0mnE5oy

You'll need to have the console open to get the debugger statement.

In 15.6.1, the first change fires, but all subsequent changes do not fire. In 15.5.4, all changes fire.

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

React 15.6.1 vs React 15.5.4; Chrome latest stable.

[gaearon]

cc @jquense

[jquense]

I'm not sure..this is a weird kinda case, The problem seems to be that if you don't control the the group the onChange event doesn't fire (but the value is correct)...The case of mixing defaultChecked and checked seems like an unsupported combo, either an input is controlled or not. cc @insin as well since he also noticed this.

[jquense]

Ah fairly certain I know what's happening. The checked value is tracked for each individual input, but when another radio is checked, there is no update to the last checked value so it remains true when you click back to it aect thinks it was already checked and so doesn't update it...I think this needs a simple call in updateCousins in ReactDOMInput

[jquense]

addendum this only happens with uncontrolled groups because the updateCousins method triggers an update on the component instance but since there is no value state changing (from the perspective of the instance) nothing changes.

I wish uncontrolled inputs didn't exist ;)

[MadaraUchiha]

Managed to reproduce this in a simpler test case, defaultChecked is not needed.

var Hello = React.createClass({
  render: function() {
    return <div>
    	<input type="radio" name="foo" onChange={() => console.log(1)} />
      <input type="radio" name="foo" onChange={() => console.log(2)} />
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Changing between the radio buttons back and forth will only log 1 or 2 once. cc @Linkgoron

This seems like an actual bug where the state of React's view of the DOM differs from the actual DOM

See Fiddle for example: https://jsfiddle.net/aaqfzzjg/

[omninando]

Managed to reproduce the problem comparing 15.3.1 vs 15.6.1, also without defaultChecked
15.3.1 - https://codepen.io/nandoacoelho/pen/XgVMxL
15.6.1 - https://codepen.io/nandoacoelho/pen/EXoWrY

[jquense]

To sum up the problem is uncontrolled radio/checkbox groups.

should probably update the issue title

[davidyu85]

Will this issue be fixed down the track?

Because this problem is affecting my web app and now I am stuck with the v15.4.1 to make my radio buttons work.

[MadaraUchiha]

The easy workaround is to manage the radio buttons with component state, instead of relying on the underlying DOM. But yes, this is a bit annoying.

[rhinoceraptor]

This is especially annoying for Redux/MobX users where DOM component state is never used. My app is 100% function components since it is using Redux.

[jquense]

It sure what you mean by that... An app that doesn't use DOM state won't have this problem since it would be using only controlled componenta

[rhinoceraptor]

You're right, I meant to say component state.