react-select, down arrow is not opening the dropdown

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

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'
})