Hiding multi selected options - react-select

Question

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:

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.

Answer 1

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.