Performance issue using <Menu /> when scrolling

Bug report

Describe the bug

When closed, <MenuList/> re-calculates its position on scroll. This greatly impacts performance when lots of <Menu /> components are rendered at once. This scenario is common when rendering tables/lists where each item has associated options. The isLazy prop, mentioned here, helps but doesn’t solve the issue.

Minimal reproduction

1. https://codesandbox.io/s/chakra-uireact100-menu-perf-dejjg?file=/src/index.tsx
2. enable “Highlight updates when components render.” in React DevTools
3. scroll right pane

Expected behavior

When scrolling, <MenuList /> should only re-calculate its position if it is open.

Screenshots

System information

• OS: macOS
• Browser (if applies): Chrome, Safari
• Version of @chakra-ui/react: 1.0.0, 1.0.1

[cereallarceny]

@with-heart I’m actually also having this, except the issue for me is a lot more pernicious. I get the following warning whenever I scroll or resize my window:

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers.

As you can imagine, receiving thousands of messages in less than a second crashes my window, thus making the <Menu> component, or the <Popover> component, completely unusable to me.

[heikomat]

We still have this issue (the exact same behaviour as described by @prayogoa) with the latest version of the chakra-ui packages.

when scrolling, everything that uses popper listens to scroll events, and checks its own position all the time. only adding the modifier as described by @prayogoa helps.

i suggest chakra cloud by default disable the scroll-eventlistener if enabled = false, or something like that