React 15.6.0 + Redux-form has broken radio buttons

[tstirrat15]

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.

[donysukardi]

Experiencing exactly the same issue here. @tstirrat15, make sure that you're using the same react-dom version. Pinning both react and react-dom to 15.5.4 works for me!

[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.

[dmitru]

I've got the same issue with react@^15.6.0; rolling back react and react-dom to 15.5.4 did help.

[buvinghausen]

JavaScript Jenga!

Add a +1 to the list of 15.5.4 did the trick

[geekuality]

Experiencing this also, rolling back is not an option for us. :(

[marcneander]

Any updates on this?

[donysukardi]

Just update to the latest redux-form, it works fine on 7.0.3. It should have been fixed somehow.

[lothisoft]

As you can see in https://codesandbox.io/s/G6zR5o3P8, it hasn't been fixed.

[karaschee]

Same issue, roll back to 15.5.4 now

[leaky]

Rolling back react and react-dom to 15.5.4 fixes this issue.

[justo]

It must be caused by the onChange event changes in 15.6: https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html#improving-inputs

[andoq]

It's probably the interaction with the React changes, but I've also tracked it down to the fix for #2444

If i comment out the fix fro that issue in ConnectedField.js, then things seem to work for me.

[andoq]

actually, that's not quite right - if I comment out those lines, my UI state changes, but the onChange event is still not fired for the input and the value doesn't change..

However, if I get rid of the onBlur event handler entirely from the constructed react component (comment out line 245), then things work.

[erikras]

Here's a forked version of @lothisoft's sandbox. It was broken with react@15.6.0, but appears to be working with react@15.6.1, probably due to facebook/react#9960. Closing.

[lauterry]

Hello I'm using react 15.6.1 and I still have this issue

[erikras]

You are correct. It is not fixed in 15.6.1. Apologies. Reopening.

[erikras]

Here's a super-simple radio button sandbox I coded up using pure React state, which does imply that the bug is with redux-form somehow.

I will investigate. 🔍

[lauterry]

As a workaround, I used onClick instead of onChange in my < input />.

What do you think ?

[erikras]

Okay, this seems to be an implementation problem. On @lothisoft's sandbox, he is not passing a checked prop to the <input/>. If the Field was given type="radio", redux-form would generate that for him in field.input, by calculating if the value prop passed to Field is === the value for the field in the form. Additionally confusing matters, he has chosen to use radioButtonValue instead of value. I have fixed his implementation by adding a single l line:

checked={radioButtonValue === field.input.value}

This is what redux-form attempts to do for you if you don't bypass the value prop, and specify type="radio".

This is the real solution.

1. Field given type="radio" so that it knows to managed the checked prop for you*
2. Each call to RadioButton is given a value prop which gets passed along to Field so that it can do that work for you.

*Granted, this isn't documented very well. Perhaps something about this should go into the Field docs.

Does this make sense to everyone? If not, please ask questions.

[pebf]

@erikras your "real solution" is not working now

[webmobiles]

@erikras example solution does not produce value

[Gtosta96]

news?

[buvinghausen]

use final-form?

[acontreras89]

I thought I was having this issue, then I realized all html inputs were receiving the same id and, thus, all labels were being associated with the first radio button.

Now it's working fine for me. Just let Field know it's a radio button.

[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!

[dmitru]

For me the problem was with BrowserSync configuration (wasted 1.5 hours figuring it out).
See this answer: #3369 (comment)

[benjaminhyw]

For me, my issue was the Field name prop didn't match up. I thought they had to be different.. they have to be same for your radios to work.

[alexteg]

Or alternatively to the great solution by @ggregoire the input value may be parsed as a number:

<Field
  name="user"
  component="input"
  type="radio"
  value={user.id}
  parse={Number}
/>

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.