How to Use Select Multiple with Redux Form?

Question

The onChange on a select multiple field does not properly select the proper value. Let's say you had a field and you were using a SelectMultiple component. Selecting a choice in the field will not update the state in redux-form.

<Field name="distroLists" label="Distribution Lists" component=
{SelectFieldMultiple} type="text"></Field>

Where the Select Field Multiple component is

const onChange = this.props.onChange;
<select ref={name} value={value} onChange={onChange} multiple>
      { emptyValue }
      {(optionList) && optionList.map(current => (
        <option key={current.value} value={current.value}>{current.name}</option>))
      }
</select>

Does anyone have any idea?

Alastair Alastair · Accepted Answer · 2017-05-08T18:28:57

I found that you need to use the change function from redux-form to manually change the values for the field.

import { change as changeFieldValue } from 'redux-form'

Once that is imported you need to make your own onChange using the changeFieldValue from redux-form. You need to take all the selected values and add them to state

const onChange = function(event) {
  let options = event.target.options;
  let selectedOptions = [];
  if (options) {
    for (let x = 0; x < options.length; x++) {
      if (options[x].selected) {
        selectedOptions.push(options[x].value);
      }
    }
    if (changeFieldValue)
      changeFieldValue(name, selectedOptions);
  }

Where name is brought in from the props. You then use this onChange to set the values on your select Multiple Field

How to Use Select Multiple with Redux Form?

1 Answers