React-select: Multiselect not selecting a value

[SoorajChandran]

I use the following code to create a select which works fine.

                 <Select
                    name="form-field-name"

                    value={this.state.selectedOption.value}
                    onChange={this.handleChange}
                    options={[
                      { value: 'one', label: 'One' },
                      { value: 'two', label: 'Two' },
                    ]}
                  />

But when I add a mulit={true} to this, it doesn't work. Even when I select a value it shows undefined. Am I doing something wrong?

[garrettdehnketurpin]

Yeah, I had the same issue, what I ended out doing was having an inline onChange function. I used something like this: onChange={event => onChange(event.value)}; I would try to add debugger; to your code, and step through it. What you should be looking for is where the selected value gets set. The fact its not being set, tells me that you are not actually getting the select's actual value.

[SoorajChandran]

I solved this using below code:

            <Select
              name="form-field-name"
              value={this.state && this.state.techFilter}
              multi
              placeholder="Filter by language/framework"
              onChange={(...args) => this.handleChange(...args)}
              options={[
                { value: "reactjs", label: "ReactJs" },
                { value: "css", label: "CSS" },
                { value: "es6", label: "ES6" },
                { value: "nodejs", label: "Node" }
              ]}
            />

 handleChange = selectedOptions => {
    this.setState({ techFilter: selectedOptions });
  };

[laryssamagalhaes]

thanks @SoorajChandran :boom:

[jonathanphz]

Is this a bug or is this how we correctly implement multi?

[Joebob12]

Going to 1+ this. I rolled back to "react-select": "1.0.0-rc.10" and multi works in that version. Was using 1.2.1 before.

[ktranel]

for any poor soul that follows the docs on the official site that says 'isMulti' change this to 'multi'.

[gabmichels]

So, for me it was adding some additional flags to the select: onBlurResetsInput, onSelectResetsInput, onCloseResetsInput. Hope this helps someone :)

<Select
      multi
      placeholder="Search..."
      onBlurResetsInput={false}
      onSelectResetsInput={false}
      onCloseResetsInput={false}
      onChange={this.onChange}
      options={options}
      value={selected}
/> 

[k-vikram]

It works for me but if you see docs

isMulti - allow the user to select multiple values

but I had to use multi={true} to make it work for multiple values.

Can anybody tell did I miss reading in-between the lines?

[Rall3n]

@k-vikram It´s due to version differences.

v1.x uses the prop under the name multi, which can be seen in the GitHub documentation for v1.x.

v2.x and above uses the name isMulti for the prop to manage multiple selection, which is documented in the official docs.

(Also, please don´t ask the same question multiple times in different issues (even closed ones) (#1308))

[k-vikram]

Ya, figured that out but forgot to update here, many thanks.

[bladey]

Hi all,

Thank you @Rall3n and everyone else who had a part in addressing this question.

This is now documented correctly for v2 and above.

However, if you feel this issue is still relevant and you'd like us to review it, or have any suggestions regarding this going forward - please leave a comment and we'll do our best to get back to you!