React Select in Scrollable Modal

[Yayspam]

Hello! I have found an issue with opening a select menu inside of a modal that has a scroll bar. Once you open the modal, and then open the select menu, you can scroll the modal but the select menu stays fixed in its original position until you hover over the select menu at which point it moves to a location on screen where it thinks it should be.

Here is a code sandbox I have created using the code from your website's "advanced" -> "Portaling" section, modified to force the modal large enough to have a scroll bar (when viewing in a 1920x1080 window).

https://codesandbox.io/s/react-select-v3-sandbox-kr5wf

Steps to reproduce:

1. Click the "Open Modal" button
2. Click on the Select component to open the drop down menu
3. Hover the mouse somewhere in the modal and use the mouse wheel to scroll the modal
4. Observe that the drop down menu of the Select component does not move as you scroll, remaining fixed in place

Expected behaviour:
The drop down menu should either:

1. Prevent the user from scrolling the modal while the drop down menu is open
2. Close the drop down menu when the user scrolls the modal
3. Move the drop down menu when the user scrolls the modal so that it stays with the Select component itself.

I have tried experimenting with different options such as:

1. Using closeMenuOnScroll to close the menu when you scroll the modal. This also closes the menu when you scroll the menu which is not helpful when the menu has enough options to require a scroll bar of its own
2. Using menuShouldBlockScroll to stop any scroll actions from occurring while the menu is open. This also prevents the menu from scrolling which is not helpful when the menu has enough options to require a scroll bar of its own.
3. Using menuPortalTarget={document.body} or trying to set menuPortalTarget to the HtmlElement tag of the modal itself. This does not work as expected and in some cases simply pushes the drop down menu off the screen.

Please let me know if you have an immediate workarounds for this issue. Thanks!

[bladey]

Hi @JasonPattle, thanks for the details.

I can see at least two other open issues documenting this problem #3929 and #3734.

It appears that version 3.0.4 didn't have the issue but is now a problem in version 3.1.0 as per #3929 (comment)

I'll see what I can do to help solve this.

[bladey]

Hello -

Thanks for reporting this issue.

This bug has been reported multiple times as per issue #4088.

A new master issue #4088 has since been created to keep track this this bug.

This new issue will exist as the source of truth going forward to investigate the issue, report findings, and implement a bug fix.

We'll take into account all the details above while investigating.

If you feel this issue has been wrongly closed as it isn't related to the new master issue #4088, please let us know and we'll take another look.

Thank you!