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:
- Click the "Open Modal" button
- Click on the Select component to open the drop down menu
- Hover the mouse somewhere in the modal and use the mouse wheel to scroll the modal
- 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:
- Prevent the user from scrolling the modal while the drop down menu is open
- Close the drop down menu when the user scrolls the modal
- 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:
- 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
- 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.
- 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!
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:
Expected behaviour:
The drop down menu should either:
I have tried experimenting with different options such as:
closeMenuOnScrollto 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 ownmenuShouldBlockScrollto 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.menuPortalTarget={document.body}or trying to setmenuPortalTargetto 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!