React 15.6.0 + Redux-form has broken radio buttons

What is the current behavior?

A component that demonstrates it:

const dummy = () => (
  <div>
    <fieldset>
      <Field name="foo" component="input" type="radio" value="a" />
      <Field name="foo" component="input" type="radio" value="b" />
      <Field name="foo" component="input" type="radio" value="c" />
      <Field name="foo" component="input" type="radio" value="d" />
    </fieldset>
  </div>
);

const decoratedDummy = reduxForm({
  form: 'dummy',
})(dummy);

Package.json versions:

"react": "15.6.0",
"redux-form": "6.8.0"

I’ve verified that redux-form version doesn’t matter, and that 15.5.4 works but 15.6.0 doesn’t for react. Perhaps it’s related to facebook/react#8575 ?

What happens in the broken case is that the blur and focus events fire, but the change event never fires. I’m not familiar enough with either the React or Redux-form internals to understand what isn’t working.

This behavior could have been what was seen in #2526 as well.

What is the expected behavior?

Being able to select the radio button

Sandbox Link

https://codesandbox.io/s/M8lXj4vRR

Oddly, I wasn’t able to reproduce this in the sandbox. Is there something about Babel or Webpack that could be screwing things up?

What’s your environment?

Browsers: both firefox and chrome Redux-form version: 6.8.0 React version: 15.6.0 Babel core version: 6.17.0 Webpack version: 2.3.3 Node version: 6.7.0

Other information

I’m kind of at a loss for what other information could be pertinent/useful. In the meantime we’ll downgrade to React 15.5.4 and keep running, but this struck me as very odd.

[ggregoire]

Just wasted 1 hour on this: if you pass a number as value, it is not automatically converted to string and it breaks the behavior of the input radio. (The value is correctly set in the reduxform store, but the input never appears selected)

So you need to convert it to string by yourself:

<Field
  name="user"
  component="input"
  type="radio"
  value={user.id.toString()}
/>

Note that passing a number as value to a React input radio works. I guess that’s what confused me.

Hope it can help!

[lothisoft]

I experienced the same issues as well.

Sandbox Link

https://codesandbox.io/s/G6zR5o3P8

The radio buttons can be selected but the onChange event handler only fires once for each radio button.