Mutation in CheckboxGroup UI component doesn't call redux-form onChange
The handleChange
method of the CheckboxGroup UI component mutates the list of values and thus the onChange handler of redux-form is not called.
handleChange = event => {
const { values } = this.state
const { value } = event.target
if (event.target.checked) {
values.push(value)
} else {
values.splice(values.indexOf(value), 1)
}
this.setState({ values })
this.props.onChange(values)
}
One solution would be to replace the lines above with immutable operations or cloning the component's state.
handleChange = event => {
const { values } = this.state
const { value } = event.target
const clonedValues = _.clone(values)
if (event.target.checked) {
clonedValues.push(value)
} else {
clonedValues.splice(clonedValues.indexOf(value), 1)
}
this.setState({ values: clonedValues })
this.props.onChange(clonedValues)
}