Menu incorrectly triggers page scroll on hover

Description

When I hover over a <Menu> which is partially off-screen, the page is scrolled. I don’t expect the page to ever scroll when hovering on a <MenuItem>.

Link to Reproduction

https://codesandbox.io/s/dawn-bash-516v70?file=/src/index.js

Steps to reproduce

1. Click to open the menu

2. Resize your browser so the menu goes off the bottom of the screen, but the top is visible:

   • 

3. Hover over any menu item

4. Notice the page scrolls (this is unexpected behaviour).

5. Scroll the page so the menu goes off the top of the screen, but the bottom is visible:

   • 

6. Hover over any menu item

7. Notice the page scrolls (this is unexpected behaviour).

8. Scroll the page so both the top and bottom go off the screen:

   • 

9. Hover over any menu item

10. Notice there is no scrolling (this is the correct behaviour).

11. Resize your browser so the full menu fits on the screen (but so there’s still some vertical scroll):

    • 

12. Hover over any menu item

13. Notice there is no scrolling (this is the correct behaviour).

Chakra UI Version

1.8.5

Browser

Brave 1.35.101 (Chromium: 98.0.4758.87)

Operating System

• Linux

Additional Information

I couldn’t reproduce the bug in Firefox v97.

Some debugging reveals the culprit as preventScroll: false here:

https://github.com/takethefake/chakra-ui/blob/main/packages/menu/src/use-menu.ts#L629-L631

Looks like this was introduced in https://github.com/chakra-ui/chakra-ui/pull/4514/files#diff-6c4aefbd3ea81ddacf70475aa13274ae14fbcc6609044c74a25c45f12bd9ff4eR616 to make the keyboard scrolling support better.

I wonder if there’s a better way to fix keyboard support? Or, perhaps alternatively; is there a way we can handle the hovering without having to re-focus every time?

[cwhenderson20]

Still an issue. Pinging to keep the bot away.

[Alfxjx]

 <MenuList h={40} sx={{overflow:"scroll"}}>
  {Array.from(Array(20)).map((_, index) => (
    <MenuItem>Item {index + 1}</MenuItem>
  ))}
</MenuList>

this may help, using a scrollable menuList