Redux-form-material-ui: Checkbox changes value to empty string on Blur

Created on 17 May 2017  路  6Comments  路  Source: erikras/redux-form-material-ui

I have a simple checkbox field:

<Field
  name="isCompleteReset"
  component={Checkbox}
  label="alle anderen Mittel auf 0 setzen"
/>

When the checkbox is selected, everything is fine.

However, when the user unchecks the box, then at first the value changes to false as expected, but when the focus is moved to another component, the value changes to an empty string.

image

image

Any way to keep the boolean value?

Most helpful comment

Same here.. I used this as fix:

<Field name="isActive" component="input" type="checkbox" normalize={(v) => !!v} />

All 6 comments

I'm facing the same issue.
Because I was unable to get a better answer, here is what I did:

import _ from 'lodash';

<Field
    name="isActive"
    component="input"
    type="checkbox"
    normalize={(v) => { return _.isBoolean(v) ? v : false; }}
/>

Maybe a good solution here would be to provide a BooleanField component to use in place of Field when the consumer requires their values to be either true or false. This could default to an initialValue of false (unless one already existed on the form) and normalize its values to either true or false. Thoughts?

I agree with @TomMahle that since this has caused so much confusion with things going back and forward on how we should handle checkboxes (true/false values) it's probably better to introduce some new concept that encapsulates this behavior instead of making changes in core that either breaks peoples forms or introduces new unexpected behavior. Personally I've encapsulated this myself in a custom ReduxFormCheckBox component that wraps a Field with a CheckBox and uses normalization to guard myself from these breaking changes but I get that that's not for everyone. Keep up that great work!!

Same here.. I used this as fix:

<Field name="isActive" component="input" type="checkbox" normalize={(v) => !!v} />

Was this page helpful?
0 / 5 - 0 ratings