React-select: Selecting multiple options that have the same value.

[DevoKit]

I am trying to allow the react-select component to select the same option multiple times. Currently if I select an option it is removed from the dropdown and thus cannot be selected again. How can I disable this logic and allow selecting the same option many times?

const options = [ { value: 'aapl', label: 'Apple' }, { value: 'msft', label: 'Microsoft' }, { value: 'tsla', label: 'Tesla' } ] <Select placeholder={'Select multiple stocks to chart'} isMulti={true} options={options} />

[scottsword]

This seems like a very unusual use case. Do you have a concrete example of why you would want this functionality?

[DevoKit]

Sure, I wanted to have the capabilities to chart the same stock over diferent intervals but I am unable to select the same stock twice. I.e. select aapl 3 times and in another select set the interval to one month, 3 months, and 6 months respectively.

[philipbulley]

Set the hideSelectedOptions={false} prop on the <Select>, that will prevent the option from being removed once selected. You can then handle multiple clicks of the same option. Note that the action passed to onChange will alternate between select-option and deselect-option.

🤔 Your use-case does sound a little odd though. Consider whether you're sticking to common and familiar UX patterns, otherwise, you may end up with an unintuitive interface.

[hdoupe]

@philipbulley thanks for posting this suggestion:

You can then handle multiple clicks of the same option. Note that the action passed to onChange will alternate between select-option and deselect-option.

Do you know of an example for tweaking onChange like this while preserving all of the other default behavior?

[hdoupe]

I moved my question to StackOverFlow, since that seems like a more appropriate place for it: https://stackoverflow.com/questions/57277305/how-to-ignore-react-select-deselect-option-action

I'd appreciate any ideas people may have.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

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