CODEWITHSUNDEEP
react-select
user3613955
user3613955

Reputation: 79

react-select, down arrow is not opening the dropdown

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}
/>

Upvotes: 4

Views: 3249

Answers (5)

hussam alhunaiti
hussam alhunaiti

Reputation: 319

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

menuIsOpen={isMenuOpen}

Upvotes: 0

coppereyecat
coppereyecat

Reputation: 213

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

Upvotes: 1

VIJAY WAGHMARE
VIJAY WAGHMARE

Reputation: 1

.css-1lmyqxj{
    height: 8px !important;
    width: 8px !important;
}

assign this property to this class it will work

Upvotes: 0

Sankalp Pol
Sankalp Pol

Reputation: 1

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,

  1. set your container position absolute / fixed with no fixed height
  2. set your container a fixed height with relative position and it will work

Try this out

Upvotes: 0

jlaitio
jlaitio

Reputation: 1948

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.

Upvotes: 1

Related Questions