I have integrated React-Select (multi) with redux-form. It works if you select a value and submit. However if you need to submit the form again (ie. they had an invalid field) the React-Select(multi) has an array with undefined values.
<Field
ref={ref => this.refTest = ref}
className = "form-control"
name="categories"
options={
this.state.categories.map(c => {
return { value: c.id, label: c.categoryName };
})
}
onBlur={this.onBlur}
component={multiSelect}
/>
The multiSelect is using this component:
export const multiSelect = (field) => {
console.log(field);
return(
<div>
<Select
name={field.name}
{...field.input}
className="section"
multi={true}
options={field.options}>
</Select>
{field.meta.touched && field.meta.error &&
<label id="basic-error" className="validation-error-label">This field is required.</label>}
</div>
);
};
No matter what I do, the second "Submit" click always has an array with undefined for "category".
After some serious debugging - it was due to how I was performing handleInitialise(). ReduxForm expects arrays of values to be in a specific format, specifically:
[{value: "1", label: "Test"}, ...]
Anyone experiencing 'undefined' values pay careful attention to how you are setting and retrieving values. Avoid mutating the object in both cases as I think this lead to some strange behaviour.