JedWatson
Automatic menu placement sometimes not correct within a scroll container
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:
- Have a scroll container that does not span the full window/viewport height
- Render the near at the bottom of that scroll container
- 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.
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.
Another solution would be to automatically scroll the container, this will match the behavior when the component is used inside a scrollable window and not an element.
We are facing this "select dropdown opening upwards in Shadow DOM for the first render" issue, it still working when there is no scroll bar, or not in the #shadow-root. Looks like the first time menu always open upwards because the condition (spaceAbove >= minHeight) in Menu.tsx#L144-L156 is true and it override the placement: 'bottom'.
hey @JedWatson or @gwyneplaine are you guys still accepting contributed PRs if our team were to write one?
