Scrolling scrolling menu into view does not work well inside scroll container

Are you reporting a bug or runtime error?

A bug, here is a codesandbox: https://codesandbox.io/s/w0ymoxq827

The issue is that viewHeight is calculated from the window, which causes problems for select elements inside of other scroll containers. This can be seen in the provided codesandbox, by changing the height of the embedded browser window, and seeing that the scroll behavior changes depending on that height.

I’ve played around in the code enough to find what seems to be a solution, causing the scroll container to scroll when needed, and also constraining the height of the menu to the total visible height of the scroll container, so the entire menu is shown, and it’s not necessary to scroll the container outside the menu to see the entire menu. I’ll work on cleaning up my code and will submit a PR, but I wanted to at least open an issue to explain the problem.

Oh and one other question while I’m at it, why does the scroll container need to be position: relative; to be detected as a scroll parent? It’s not immediately obvious that it’s necessary, and it was only by digging through the source that I figured out why my container was not scrolling. I guess this is because the menu is absolutely positioned, so it needs a relative parent.

I believe this is similar to the case reported back in https://github.com/JedWatson/react-select/issues/1267, but that plnkr is broken, so I can’t tell for sure.

[IanVS]

@ranihorev There is now. I finished up the e2e test that I was a bit stuck on, and pushed one up. I hope that it’s valuable and that the maintainers will be able to merge it. 🤞

[mmarchuk-jama]

Thanks for your comment @IanVS . Setting the scroll container to position: relative; fixed my issue related to menu focus and likely saved me a great deal of time!