Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiselect not selecting a value #2201

Closed
SoorajChandran opened this issue Dec 8, 2017 · 11 comments
Closed

Multiselect not selecting a value #2201

SoorajChandran opened this issue Dec 8, 2017 · 11 comments

Comments

@SoorajChandran
Copy link

SoorajChandran commented Dec 8, 2017

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
Copy link

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
Copy link
Author

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
Copy link

thanks @SoorajChandran 💥

@1-800-jono
Copy link

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

@Joebob12
Copy link

Joebob12 commented Apr 6, 2018

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
Copy link

ktranel commented Jul 31, 2018

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

@gabmichels
Copy link

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
Copy link

k-vikram commented Nov 12, 2019

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
Copy link
Collaborator

Rall3n commented Nov 12, 2019

@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
Copy link

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

@bladey bladey added the pr/needs-review PRs that need to be reviewed to determine outcome label May 28, 2020
@bladey
Copy link
Contributor

bladey commented Jun 17, 2020

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!

@bladey bladey closed this as completed Jun 17, 2020
@bladey bladey removed the pr/needs-review PRs that need to be reviewed to determine outcome label Jun 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants