search

webzep / mui-nested-menu

The package lets you nested menu items infinitely deep.
https://mui-nested-menu.vercel.app/
MIT License
67 stars 30 forks source link

Sub menus show a scroll but don't seem scrollable #2

Open solomon23 opened 2 years ago

solomon23 commented 2 years ago

If i mouse to the menu and arrow key down they will scroll - but if I scroll my trackpad it doesn't scroll at all

image

solomon23 commented 2 years ago

It's this line that's doing it - https://github.com/steviebaa/mui-nested-menu/blob/main/src/mui-nested-menu/components/NestedMenuItem.tsx#L141

Removing that solves the problem but then a lot of other stuff stops working

solomon23 commented 2 years ago

one hack is to give this inner div the scroll since the outter div doesn't have pointer events https://github.com/steviebaa/mui-nested-menu/blob/main/src/mui-nested-menu/components/NestedMenuItem.tsx#L153

style={{
              pointerEvents: 'auto',
              overflowY: 'scroll',
              maxHeight: 'calc(100vh - 64px)',
            }}
webzep commented 2 years ago

Oo, thats a nasty one.

I couldn't replicate it on my laptop but managed to in a codesandbox.

I butchered a copy of the NestedMenuItem component into the sandbox to play around with. It does just seem to be a height issue of that inner div doesn't it.

I'm thinking something along the lines of adding a maxHeight prop to the NestedMenuItem component and just having it fallback to 400px or something if it isn't provided. If that doesn't work for the user, they can set a custom one. 

          style={{
            pointerEvents: "auto",
            overflowY: "auto",
            maxHeight: maxHeight ?? "500px"
          }}

Keen to hear your thoughts. Would you like to open a PR for it?

dreyychen commented 1 year ago

Adding pointerEvents: "auto" to the PaperProps solved my issue

      MenuProps={{
        PaperProps: { style: { pointerEvents: "auto" }},
      }}