React-select: Remove selected value from options list

[stinoga]

I have an option I'd like to hide from the dropdown menu when selected. Is there a way to do that? I tried removing it from the options when selected, but then it doesn't show as the selected value.

[medv]

The item gets a class, so you can hide through css. Or you can supply the select react component with a custom option renderer function (see list of props you can supply, it's one of those) which gets passed an argument of the selected value(s). You can check against that and return null if the item matches that. Just a theory.

[gareys]

As @medv suggested, you can hide this by using css, which is simple.

.Select-option.is-selected { display: none; }

However, removing it from the array of options is perhaps the "correct" way of going about it.

[geminiyellow]

@gareys

yep, i want same options in multi dropdown, the css can only hide in one.
removing it from the array of options is the "correct" way.

[marianzburlea]

Same issue here. can't control the "Select-option" div.

[marianzburlea]

Just found a solution that works, I've added to the option object a className property like:

{
  label: 'my option',
  value: '2',
  className: 'hide'
}

and in css I have:

/* this hides the value in the drop down list options */
.hide {
  display: none;
}
/* This shows the selected value */
.Select-value.hide {
  display: inherit !important;
}

[hovissimo]

Just use .Select-option.is-selected { display: none; } ?

Works great for me

[l3v1k]

With css _display_ case there is problem with isFocused and arrow-navigation, because item persist in list but hidden.

[l3v1k]

Found hideSelectedOptions prop, thinks this issue should be closed. ⭐️
@stinoga @JedWatson

[askshinde]

Found hideSelectedOptions prop, thinks this issue should be closed. star
@stinoga @JedWatson

It hides form option but still shows in the search field as selected option

[bladey]

Hi all -

Thanks for your solutions to this issue.

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

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, and we'll re-open it if necessary.