React-select: Control opening direction up/down

[BenGedi]

Hi!
Is there a way to control the opening direction programmatically?
kinda like the native select tag behavior, opens up or down (when there is not enough space for the dropdown to open up ).
thanks!

[nickbouton]

+1

[Reggino]

+1

[FutureKode]

+1

[vjpr]

+1

[dtraft]

+1

[snario]

+1

[tirli]

+1

[Xesued]

+1

[ironosity]

In version 1.*-beta you can override style with
.Select-menu-outer { top: auto; bottom: 100%; }
That will make it open up. You'll need to override a few more styles to get rid of rounded corners and what not.

[ndugger]

I'd like to bring attention to this request again. I found a different component that has this option, but is missing others. I think this would be really useful and is really important to us, as what we did instead to make it work makes me cringe...

[mark-engagio]

+1

[mvaivre]

+1, this is a pretty essential feature IMO

[Kingwl]

+1

[jch254]

+1

[alexjesp]

+1

[TMUND]

+1

[dwertheimer]

+1 Please @jedWatson ...this is an important capability for such a fully-featured control!

[HeberLZ]

+1, i'm really surprised that it doesn't have this feature, most dropdown solutions do nowadays

[scmbwis]

+1

[alanjohnson]

+1, how is this not already in there? welcome to 2017.

[neomaxzero]

+1

[sutrej]

+1 !

[paulokuda]

+1

[joriswijlens]

+1

[pmenabe]

+1

[hkelly93]

+1

[g-pascal]

+1

[fermuch]

For those who need to make the dropdown go up:

• to the <Select>, add a custom className, something like my-cool-select-top

• add the following CSS to your project:

.my-cool-select-top .Select-menu-outer {
  top: auto;
  bottom: 100%;
}

and done!

This is based on this PR: https://github.com/JedWatson/react-select/pull/1232/

---

To know the current state of this issue, please take a look at the PR https://github.com/JedWatson/react-select/pull/1677 , which aims to auto-handle the direction of the dropdown.

If you want to show your interest for this issue, please add a thumbs-up to the first comment instead of commenting. Commenting sends notifications to all of us who are subscribed, which is honestly bothering.

If you want to be notified of events affecting this issue, instead of commenting, press on the "subscribe" button and you'll be notified whenever a new comment or update is added here. I also recommend subscribing to #1677

[MartinHaeusler]

I just ran into this issue as well. In 99% of all cases, I don't really care in which direction (top or bottom) the menu overlay is opened, for as long as the overlay is visible to the user. It would be nice if the select would auto-detect in which direction to open the overlay, perhaps using a CSS media query.

What I mean is: when there is not enough space below the search line to display the overlay, display it above the search line. A simple preference could be set which direction to prefer. At least, that is how I would expect a dropdown menu to work...

[vkmita]

+1

[zakerby]

+1

[drakoniprincessa]

+1

[schnubor]

+1

[danilobjr]

+1

[wojciechka]

+1

[vajda]

If you want dropdown to open up and also to have rounded corners on right places, here are the css changes:

.Select-menu-outer {
  top: auto;
  bottom: 100%;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}
.Select-option:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.Select-option:last-child {
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}
.Select.is-open > .Select-control {
  border-top-right-radius: unset;
  border-top-left-radius: unset;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

[kumar935]

+1

[tazabreu]

+1

[Diablo27]

+1, Need this one urgently

[jaburx]

+1

[sauldeleon]

+1 >_<

[zerowar]

+1 How about a new prop to do that?

[lucas-viewup]

+1 to auto-direction behavior according to the screen.

[ashok-sc]

Still nothing here?

Need this please +1.

[apurvgandhwani]

+1. Please add this

[JedWatson]

This has been implemented in v2, will close once that's released. Please feel free to check out the alpha.

[Kingwl]

This issue lasted for almost three years 😂

[CohenBenco]

https://github.com/JedWatson/react-select/pull/2501 This PR adds autoFlip option and directionUp option

[drodenberg]

Is there a pr somewhere for the autoflip? @JedWatson

[Plorark]

@JedWatson How exactly this can be achieved in v2?

[glebtv]

It's
menuPlacement="top" or menuPlacement="auto"
Works nicely in v2, thank you :+1:

[sutrej]

JedWatson you rock

[gwyneplaine]

You can use the menuPlacement property in v2.

<Select menuPlacement="auto" />

[iamdanthedev]

In case anyone else is stuck with v1 on their project, you can do pretty much whatever you want by extending the original component and adding custom functions to prototype, e.g.:

import ReactSelectOrig from "react-select";

class ReactSelect extends ReactSelectOrig {}

(ReactSelect.prototype as any).openMenu = function openMenu() {
  this.setState({ isOpen: true });
};

[AbhisheshPradhan]

I was able to render the dropdown above or below by checking if there is enough space or not. My solution will render the dropdown above only if there is no space below and there is space above. For react-select-v1. (The project was using jQuery already.)

<Select.Async className={"terms-select " + inputObj.Title + "-select"}  onOpen={this._onOpen(inputObj.Title)} />

private _onOpen(inputTitle) {
let inputWrapper = jQuery('.' + inputTitle + '-select > .Select-control')[0].getBoundingClientRect();
   // if there is no space at the bottom and there is space at the top, then render at top otherwise render bottom
    let hasSpaceAbove = (window.innerHeight - (inputWrapper.top - 200)) > 0 ? true : false;
    let noSpaceBelow = (window.innerHeight - (inputWrapper.bottom + 200)) < 0 ? true : false;
    console.log("noSpaceBelow", noSpaceBelow);
    console.log("hasSpaceAbove", hasSpaceAbove);
    if(noSpaceBelow && hasSpaceAbove) {
      console.log("Render above")
      jQuery('.' + inputTitle + '-select > .Select-menu-outer').css({
        top: "auto", 
        bottom: "100%"
      })
    } else {
      console.log("Render below")
      jQuery('.' + inputTitle + '-select > .Select-menu-outer').css({
        top: "100%", 
        bottom: "auto"
      })
    }
  }