Select doesn't close on click to it

[TonyCh55]

When click on select it opens and when to click it again it doesn't close

But in storybook demos this functionality works properly Help please

[adiled]

Anyone facing this, remove multiple option form your props, and also make sure if you're using a custom renderOption, the first parameter is props that you need to forward like so:

renderOption={(props, optionData, { highlighted, selected }) => <li {...props}>...</li>}

[fmmajd]

For anyone else having the same problem in the future, it's not a js issue. it's a CSS issue. You can add this to have "close on blur" functionality:

.form-group-container:not(.form-group-has-focus) .form-group-select {
  display: none;
}

[CallumJHays]

To add to @fmmajd 's answer, to get this working with css modules, you need to supply definitions for the classes .has-focus and .select, even if empty.

/* yourReactSelectSearch.module.css */

/* required even if empty, otherwise classnames are never assigned */
.container {}
.has-focus {}
.select {}

.container:not(.has-focus) .select {
    display: none;
}

It appears that the example default style.module.css is out of date

[kevincompton]

.form-group-container:not(.form-group-has-focus) .form-group-select {
  display: none;
}

this fixed my issue and I find this pretty janky, shouldn't take all this research to get it to look like the demo. Also I would encourage the devs to have this work with tailwind.