menuplacement auto in div with overflow not correct

[Brozart]

Menuplacement auto in a div with overflow auto, puts the menu to the bottom. Even when there is not enough space. This makes the form or div scrollable when it doesn't need to. This occurs when the select is put on the bottom of the form.

Examples:

This screenshot comes from my CodeSandBox: https://codesandbox.io/s/react-select-menu-placement-479mi?file=/src/App.js:405-410

Version used: 3.1.0

[pmehta-18]

@Brozart your example works perfectly fine, if tag is placed at the bottom of the page when there is no sufficient height for accommodating the menu. It is in the in-built behavior of the library itself. Check this example here https://jhlkd.csb.app/

[Brozart]

@pmehta-18 I know, but you need to make the browser smaller in height. There is a small area where the menu is still placed to the bottom when there isn't enough space.

[alk-ahebert]

Same problem for me, with a small screen and, when the component is close to the bottom of the window.

react-select@3.1.0

[chadlavi-casebook]

+1

[ebonow]

Greetings all,

It would seem that the positioning is determined not to be the available space, but rather by the edge of the viewport.

react-select/packages/react-select/src/components/Menu.js

Line 76 in 45f6f29

const viewHeight = window.innerHeight;

Here is a forked example of your code with the select positioned near the bottom of the screen that is working as expected.

codesandbox: demo

In regards to what the behavior should be, I think this is hard to say. If you are positioning the element absolute or fixed, then it is implicit that the menu is outside the layout flow already.

For example, updating your container div to have overflow visible presents no issues with properly positioning the menu to the top. I don't know how feasible it is to calculate this on pageScroll and may be a better candidate to look at when we are able to refactor the menu to perhaps leverage IntersectionObserver, but certainly the documentation should be a bit more clear about this behavior.

[ebonow]

Just a note, I began looking at how IntersectionObserver could be used. This does not entirely work as designed as onMenuOpen is called after the menu is opened so the first placement is incorrect, but exploring ideas of how to better calculate changes to the available space.

demo: codesandbox

[Gunthervg]

+1 Bringing back to live