react-menu: Menu items don't follow the MenuButton on scroll

To reproduce:

Visit https://codesandbox.io/s/react-menu-scroll-issue-8o22f
Click “Open menu”
Scroll

When the whole page is scrolling, menu items follow the MenuButton as expected (like in the docs).

However, if you have some other container with overflow: auto, like in the CodeSandbox above, the menu items are getting detached from the MenuButton.

Is there a way to ensure that menu items always rendered next to the MenuButton?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

@moroshko v1.7.0 released two props that should be able to solve your use case: https://codesandbox.io/s/react-menu-scroll-issue-no-portal-forked-berjd

szhsin on Feb 25, 2021

Hi @moroshko @benatkin , thanks for your feedback.

Currently menu position is calculated based on the viewport size. Positioning menu within a specific container is not supported yet, that’s why the default stylesheet sets position: absolute to menu’s containing block. Will be adding this feature in the next release.

szhsin on Feb 16, 2021

It works great @szhsin

by the way - is it a built-in way to detect scrolling inside container with overflow and close the menu with portal={true} ?

viewScroll="close" - unfortunately not work in that combination

I used this example to illustrate this: https://codesandbox.io/s/react-menu-scroll-issue-no-portal-forked-n4cm5

(thanks again for the portal prop : )

mrudowski on Feb 26, 2021

Great. @moroshko I knew that was just a workaround. Glad a real fix is in. Thanks @szhsin!

benatkin on Feb 25, 2021