Sub menus show a scroll but don't seem scrollable

[solomon23]

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

[solomon23]

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]

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)',
            }}

[steviebuilds]

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]

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

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