Pratik Kulshreshth
Pratik Kulshreshth

Reputation: 125

Hiding multi selected options - react-select

Using react-select to have a select dropdown which allows async options loading and multi select. The default behavior of the library renders the selected options next to the input itself: enter image description here

But I want to show the selected options in the options list rather than in the select header. I have achieved that by passing the Custom Option component. Here is the working example:

https://codesandbox.io/s/trusting-hellman-yidqn

And now I want to remove/hide the selected options from the header. Also I want to show the placeholder back when focus is out of the input.

Upvotes: 6

Views: 8604

Answers (1)

Nils Kähler
Nils Kähler

Reputation: 3001

If you don't want the tags to show up in the input field, you can disable that by adding the attribute controlShouldRenderValue={false} to the item.

Upvotes: 9

Related Questions