Automatic menu placement sometimes not correct within a scroll container

[oschwede]

The placement calculations for automatic menu placement seem to be wrong for some cases since #5177 has been merged.

Example codesandbox:
https://codesandbox.io/s/react-select-v5-sandbox-forked-8sgyet

Steps to reproduce:

1. Have a scroll container that does not span the full window/viewport height
2. Render the near at the bottom of that scroll container
3. If the menu is opened, the MenuPlacer should let the menu flip and show on top of the select

Instead, the menu opens below, sometimes even increasing the scrollable area.

Possible cause:
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L94
The computation of viewSpaceBelow seems incorrect when the scroll container's top edge is different from the windows top edge: menuTop comes from a call to getBoundingClientRect(), which gives the top offset relative to the viewport. When located in a scroll container, menuTop should actually be the top offset of the menu relative to the scroll parent, so that the comparison with viewHeight (the scrollParent height) returns the true view space available below the select.

Not sure which computation would give better results, I think menuTop should be relative to the scrollParent, not the viewport so that other computations remain correct. So something like
const menuTop = isFixedPosition ? menuEl.getBoundingClientRect().top : menuEl.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top

I'm also willing to contribute a PR, but a good solution should be discussed first.

[jainishp6]

facing the same issue as well.

[malakutsko]

I'm facing the same issue, but in my case the select with half of the menu is scrolled out of the view by this line: https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L161

I forked the sandbox of @oschwede to reproduce it: https://codesandbox.io/s/react-select-v5-sandbox-forked-1m3qjv
The issue is reproducible by opening the top most select element.
The main difference to the original sandbox is that my container has position: "relative".

@oschwede, I think you are right about the cause. I came to the same conclusion while debugging.