Portaling bugged with scrollable parents

[Etheryte]

When using portaling, the dropdown position becomes bugged when a parent is scrolled while the dropdown is open.

Screen.Recording.2021-04-23.at.16.24.45.mov

Repro case: https://codesandbox.io/s/react-select-v3-sandbox-forked-lgkms
Also reproducible on the docs page if you manually edit the layout to have overflow.

This is a pretty common issue with dropdown libraries, common solutions include closing the dropdown on any parent scroll or trying to dynamically keep the position updated with a transform.

[ebonow]

Thanks for reporting @Etheryte ,

There are several existing issues we'll round up and look to resolve regarding fixed positioning and portaling that will be the focus of development following the TypeScript rewrite that is currently underway.

[Methuselah96]

Can you set the menuPortalTarget to be the scrollable parent? In your example it's set to document.body so that's why the menu's not moving.

Updated CodeSandbox: https://codesandbox.io/s/react-select-v3-sandbox-forked-un5el?file=/index.js

[Etheryte]

@Methuselah96 Thanks for taking the time to look at this. While that would work for dropdowns which fit into the scrollable parent viewport (shown in light blue below), you will end up with cropping on longer dropdowns — the very problem that portaling is meant to solve. In short, setting the menuPortalTarget to the scrollable parent is equivalent to not using portaling at all. Hope this explanation makes sense, please let me know if I can clarify.

[Methuselah96]

Thanks for the response, sorry I was confusing portaling with something else. As @ebonow mentioned we're taking a closer look at menu positioning and related issues at the moment so hopefully we can get this resolved.

[Methuselah96]

This is the same issue as reported in #4088, so I'm going to go ahead and close this in order to consolidate the issues. Thanks for the helpful reproduction case, we hope to make some progress on this soon. I've added this issue and example to the list of issues and examples on that issue.