How to keep the search term intact after making a selection?

[hermbo]

My client wants to have the search filtered options stay in place after making selections. The current way it works is you enter some text and when you choose an option it stores it, removes your search term and resets all your original options. Requiring you to do it again if your wanting to select multiple options with that same search term.

How can I work around this? I want to be able to enter a search term, then select multiple options without retyping each time.

[Rall3n]

Hello @hermbo,

you have to manage the inputValue by yourself to keep it after selecting an option.
There already exists a solution in #3210, but for completeness:

const [inputValue, setInputValue] = useState('');

<Select
  inputValue={inputValue}
  onInputChange={(val, { action }) => {
    // Check if the cause of the change is not a selected option
    if (action !== 'set-value') {
      setInputValue(val);
      return val;
    }

    return inputValue;
  }}
  isMulti
  closeMenuOnSelect={false}
/>

Additionally you have to set the closeMenuOnSelect prop to false to prevent the menu from closing and clearing the search value.

[hermbo]

Thanks @Rall3n for pointing me to this solution. Only problem is I have like 50+ select dropdowns in my app and I don't really want to make state for all of their input values... Would be nice if there was a like clearInputValueOnSelect={false} option for this thing.

[Rall3n]

@hermbo You could just return the new/old value instead of setting a state, but the problem that would occur is "how do I get access to the old value?".

A custom state is the easiest for accessing the old value, and you could also easily create a wrapper component that would replace the 50+ usages of the base Select component in your app.