React-Select scrolls window instead of scrollable parent div

[taneliang]

Our app has a tab-like page layout, where we set overflow: "hidden" on the page in favor of having a scrollable div containing the tab's contents. For additional context, this marketing page contains a video that shows this layout.

Bug: when the menu is opened, the <Select> calls window.scrollTo instead of scrolling the tab content div. If there's an element on the page positioned offscreen (e.g. a Bootstrap .sr-only element), Google Chrome (but not Firefox) actually scrolls the page. This is an issue because the overflow: "hidden" rule then prevents users from scrolling back up to the rest of the app.

Minimal repro sandbox: https://codesandbox.io/s/repro-reactselect-windowscrollto-jqghv?file=/src/Example.js

Additional details

We've tracked down the cause to getScrollParent:

1. When a <Select> menu is opened, if the menu is not completely in view, React-Select uses its scrollTo function to try to scroll the menu onto the screen.
2. The getScrollParent function is used to obtain the menu's scroll parent.
3. Because no position rule was set on any element above the menu, the style.position === 'static' condition returned true for every parent. So getScrollParent returned document.documentElement.
4. This caused scrollTo to call window.scrollTo.

Maybe this can be fixed by using Element.scrollIntoView?

[ebonow]

Greetings @taneliang ,

Thank you for the thorough repo steps and investigation. I believe there is an existing element.scrollIntoView PR which may resolve this. We'll look more into this after version 5 - TypeScript conversion is complete.

[wilbsy]

@taneliang We're having the same issue. Was this ever resolved? How did you handle it? Thanks!

[wilbsy]

While our situation was a bit different, the result was the same. And there was an easy fix: menuPlacement={'auto'}