Using React-Select in v1.0.0-beta10, I'd like to keep selected items in menu in order to be able to implement a dropdown behaving similar as the multi-select at MaterializeCss

here's a screenshot:

how to achieve this behavior?

Using React-Select in v1.0.0-beta10, I'd like to keep selected items in menu in order to be able to implement a dropdown behaving similar as the multi-select at MaterializeCss

here's a screenshot:

how to achieve this behavior?

• javascript
• reactjs
• react-select

2 Answers 2

Just to have this plete as you asked in react-select on GitHub this was made possible using removeSelected={false} in this pull request. Now (mid 2019) the solution is:

hideSelectedOptions={false}

You have access to a prop called filterOptions that accepts a function that takes the properties options, searchFilter and selectedOptions.

You should just be able to always return options that match the search filter instead of stripping out the selectedOptions something like below (if you are using underscrore/lodash. Or write your own method.

const filterOptions = (options, searchFilter, selectedOptions) => {
  return _.filter(options, options => _.includes(option.value, searchFilter));
}

and then

<Select {...props} filterOptions={filterOptions} />

Hope this example helps.