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.

Tuscany

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

I am using Version 3.1.0 – Tuscany

Answer 1

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

You can see other props here ;)

Chantress

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 – Managing

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

That doesn't make it dynamic based on "fitting the screen" – Ineluctable

Answer 2

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

You can use menuPlacement prop top, bottom or auto

Daryl

Answer 3

<Select menuPortalTarget={document.body} menuPosition={'fixed'} />

After hours of finding the solution.This perfectly worked for me.

Teacart

Wow, perfect. This answer should be the accepted one :) – Ineluctable

What an Elegant solution! Thank you! – Fontanez

Answer 4

If you are already using menuPlacement="auto" and the dropdown does not drop up as you would expect, you can additionally use minMenuHeight to inform the dropdown when it should change, which solved this issue for me:

<Select 
  menuPlacement="auto"
  minMenuHeight={300}
/>

Radiotransparent

Answer 5

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%;
}

Catadromous

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

Answer 6

If you want a native solution for this problem, use styles prop like below

<ReactSelect
  id="my-select"
  name="my-select"
  instanceId="my-select"
  options={mySelectOptions}
  value={mySelectValue}
  onChange={handleMySelectChange}
  
  // ATTENTION
  menuPortalTarget={typeof window !== 'undefined' ? document.body : null}
  styles={{
    menuPortal: (provided: React.CSSProperties) => ({
      ...provided,
      zIndex: 9999,
    }),
    menu: (provided: React.CSSProperties) => ({
      ...provided,
      zIndex: 9999,
      top: 'auto',
      bottom: '100%',
    })
  }}
  //

/>

Read more on https://react-select.com/styles

Thromboplastic

Answer 7

I investigated the source code of the library and found that to make menuPosition="absolute" and menuPlacement="auto" work the closest scrollable parent (relative to which we want to position menu) must have position: relative. It fixed all the issues with dropdown menu positioning in my case.

It works at least in the latest version of the library (5.8.0).

Would