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?

Ali · Accepted Answer · 2017-05-08 18:28:57Z

2

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

answered May 8, 2017 at 18:28

Ali

6691 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webmaster Over a year ago

const value = Array.from(e.target.options).filter(x => x.selected).map(x => x.value);

suyesh Over a year ago

change is action creator, will it work without dispatching it to store? For my case simply importing and calling change is not working. Any Suggestion.

Collectives™ on Stack Overflow

How to Use Select Multiple with Redux Form?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related