React JS : React Select Dropdown position to top if there is no space below

Question

I am using React Select

I want its Dropdown position to be dynamic. let's say if there is no space below it, then the dropdown should be opened to above select box.

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

Is there any option to make dropdown position dynamic?

Any help would be great.

Thank You.

Solution 1

You can use menuPlacement option on your Select component with "bottom" (default), "top" or "auto".

You can see other props here ;)

Solution 2

<Select
  menuPlacement="top"
  ...
/>

You can use menuPlacement prop top, bottom or auto

Solution 3

Inside component:

render() {
    const className = this.state.dropUp ? 'drop-up' : '';

    return (
      <Select {...this.props} className={className} />
    );
  }

And in css file:

.drop-up .Select-menu-outer {
  top: auto;
  bottom: 100%;
}

Comments

[Karthick Vinod]

Which version of react-select are you using? v3?

[Xperia Reno]

I am using Version 3.1.0

[Admin]

side note: you can make state value of dropup false by window size

[Chase Sandmann]

It's usually fine to make the cheeky "check the docs ;)" comment, but the React Select docs are honestly terrible to search through. It took me hours to find this prop

[Manny Alvarado]

That prop doesn't work, at least for asyncs. It's an unresolved issue on their end.