redux-form: 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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 22
Comments: 30 (4 by maintainers)

Commits related to this issue

plaid iframe; fetching and rendering bank accounts — committed to blockchain/blockchain-wallet-v4-frontend by deleted user 6 years ago

Most upvoted comments

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!

+11

ggregoire on Aug 22, 2018

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.

lothisoft on Jul 11, 2017

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.

Field given type="radio" so that it knows to managed the checked prop for you*
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.

erikras on Sep 6, 2017

@erikras your “real solution” is not working now

pebf on Oct 25, 2017

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

erikras on Sep 6, 2017

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

dmitru on Jul 20, 2017

use final-form?

buvinghausen on Feb 28, 2018

news?

Gtosta96 on Feb 28, 2018

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.

andoq on Aug 31, 2017

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

justo on Aug 31, 2017

Same issue, roll back to 15.5.4 now

karaschee on Aug 23, 2017

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

geekuality on Jul 27, 2017