[Menu] rendering problems with multiple menus

Describe the bug

My use case is a column of cards with actions that can be taken (e.g. duplicate, delete). At the top of the list, the menus seem to work fine. But when you start scrolling down the list and open the menus, we start to see some strange behaviour:

• Sometimes the menu will flicker.
• Sometimes you’ll scroll up and try to open the menu and it won’t appear.
• Sometimes the options are very hard to select because the menu jumps around.

See this screen capture from the codesandbox:

Here’s another example from my app:

Expected Behavior

I expect the menus to work as normal when they’re in a list.

To Reproduce Use this codesandbox: https://codesandbox.io/s/chakra-js-starter-xxqzk

Suggested solution(s)

I think using portals might be a better fit for my use case because of how the positioning needs to work. I think maybe allowing Menu to accept the usePortal prop might help. I had a look at the implementation and usePortal is hard coded to false: https://github.com/chakra-ui/chakra-ui/blob/91966cef0a5b424b44b1850393e9f66de4f469d0/packages/chakra-ui/src/Menu/index.js#L316.

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.1
• Browser: Chrome
• Version: 78.0.3904.97

[aaronmcadam]

@Aeolun you’re welcome to fork my original codesandbox and update the code for v1: https://codesandbox.io/s/chakra-js-starter-xxqzk

[segunadebayo]

@aaronmcadam, that might work. I’m thinking it has to do with some modifiers in popper.js, maybe enableEventListeners needs to be set to false.

Not sure but I’ll look into it. The walkaround is to use Popover directly. I’ll test this within the dev-ts and ensure this bug is fixed