react-select, down arrow is not opening the dropdown - react-select

Question

Using version "1.2.1", down arrow won't open the menu. I see this work in demo examples and I am using the same code.
<Select
id="state-select"
ref={(ref) => { this.select = ref; }}
onBlurResetsInput={false}
onSelectResetsInput={false}
autoFocus
options={options}
simpleValue
clearable={true}
name="selected-state"
disabled={false}
value={true}
onChange={this.onChange}
searchable={false}
/>

Answer 1

I've encountered the same problem and the most probable cause is your other styling, as react-select does not work properly if the container has overflow: hidden, and behaves badly with some other values of overflow.
Try modifying the styles of your container, or removing the outer css completely to see if it fixes the problem.

Answer 2

Too late to answer, but I had the same problem recently.
It is true that react-select has problems with overflow. What you can do is,
set your container position absolute / fixed with no fixed height
set your container a fixed height with relative position and it will work
Try this out

Answer 3

.css-1lmyqxj{
height: 8px !important;
width: 8px !important;
}
assign this property to this class it will work

Answer 4

Since I just came here looking for a solution to this problem, and this is one of the highest ranked search results, and none of the other answers are viable when you have other styling requirements to meet that need things like overflow: hidden, I thought I'd share the solution I eventually found.
Courtesy of github user cheechoo28 on this issue in the react-select repo, adding the "pointer-events: none" property to the indicatorsContainer class resolves the issue.
If you're styling via react-select's style object, you do this by using the property on the object like this:
indicatorsContainer: (provided) => ({
...provided,
pointerEvents: 'none'
})

Answer 5

use an useState for isMenuOpen and add the below as prop on the react-select:
menuIsOpen={isMenuOpen}