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

Created on 16 Jun 2017 · 12Comments · Source: facebook/react

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.

Regression

Source

ThisIsMissEm

👍13 😕2

Most helpful comment

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/

MadaraUchiha on 18 Jun 2017

👍3

All 12 comments

cc @jquense

gaearon on 16 Jun 2017

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 on 16 Jun 2017

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 on 16 Jun 2017

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 ;)

jquense on 16 Jun 2017

😄1

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/

MadaraUchiha on 18 Jun 2017

👍3

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

omninando on 28 Jun 2017

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

should probably update the issue title

jquense on 28 Jun 2017

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.

davidyu85 on 30 Jun 2017

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.

MadaraUchiha on 30 Jun 2017

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.