search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.49k stars 4.12k forks source link

menuPosition property doesn't seem to be changing anything in menu position behavior #5742

Open YesIDont opened 11 months ago

YesIDont commented 11 months ago

version: 5.7.2 live example: https://codesandbox.io/s/react-select-vertical-position-yzdm33?file=/src/Dropdown.js

Expected behavior: when setting menuPosition property to either "auto" or "top" the menu would open accordingly to the rule.

Observed behavior: menu always opens in "bottom" position.

Notes: Provided example shows the exact layout and its style we use on our project. Our client requested that dropdowns would open to the top when menu being opened is close to the bottom of the filters box, so that opened menu would not hide under "Apply" and "Reset" buttons box and not resize the filters box.

Please tell us if there is more information that needs to be provided.

Kamal0078k commented 11 months ago

I guess your are looking for menuPlacement prop which changes the placement of the menu in relation to the control. Here is the example: https://codesandbox.io/s/sleepy-wildflower-h7wnjp?file=/src/App.js

YesIDont commented 11 months ago

True, I've mistaken these two.

But the problem is still there! Now even the "auto" option is selected the menu will open to the top but not at all times. As if css "overflow-y: scroll" was messing with that.

YesIDont commented 11 months ago

Bump :)

After changing menuPosition to menuPlacement the "auto" option still won't work as expected.

YesIDont commented 11 months ago

Again bump, this is still an issue, even after changing menuPosition to menuPlacement, the auto setting won't open menu up always when the dropdown is close to the bottom of scrollable visible area.

moloko commented 11 months ago

I'm getting a similar issue - I have an existing application that uses v4.3.1 of this component and I've just tried updating it to v5.7.4 and I'm seeing a few instances where, when menuPlacement was set to 'auto' it's now opening 'top' when it used to open 'bottom', e.g.: react-select v5.7.1 opening on top when it used to open at bottom

This results in an issue where there are items at the top of the menu that can't be selected because it's opening underneath another element.

In this specific instance it wouldn't be an issue for me to set menuPlacement: 'bottom' ~but there's an additional issue with that, in that it causes a 'scroll jump' when the menu opens~ (I've just figured out that the 'scroll jump' can be fixed by setting menuShouldScrollIntoView={false}).

Here is the exact same component instance in my application but using react-select v4.3.1: react select v4 behaviour