Add documentation example for how to use cascading menu with initial click instead of initial hover?

[cmdcolin]

I was trying to change the cascading menu example, but have it pop up on an initial click (and then subsequently, when mousing through the cascading submenus, have the cascading submenus open with hover)

I was almost going to file this issue to say I couldn't figure it out, but I think I have it figured out now! :)

It may be useful to have an example in the docs to help with this though

I think the trick is

1. For the initial click, you do not want to use the HoverMenu component, and just have a regular MUI Menu
2. For the subsequent Cascading panels, you do want the HoverMenu component

Here is a codesandbox that has the expected behavior I think https://codesandbox.io/s/restless-leftpad-p04dv3?file=/src/App.js

[cmdcolin]

If interested I can turn this into a PR for the repo to update the demo directory

[cmdcolin]

random note, my attempts thus far produce the React.forwardRef related errors in mui4 but not in mui5 e.g. like #11

muiv4 version https://codesandbox.io/s/romantic-danny-dvo7zm?file=/src/App.js
muiv5 version https://codesandbox.io/s/restless-leftpad-p04dv3?file=/src/App.js

hanven't found the exact fix for the muiv4 version yet but might not be critical since it runs anyways

[jedwards1211]

sorry for the delay, I'm gonna have to do some research to figure out how to do this. It's kind of a catch-22 because:

1. Using a HoverMenu for the root menu isn't able to get the click-away event to close it
2. Using a normal Menu interferes with the hover events for submenus

There's some debate about if Popovers should block events with the backdrop here: mui/material-ui#11243

Might just have to implement my own click away listener...

[cmdcolin]

no worries on that :) for my particular use case, it feels like the code sandbox has the right behavior (click initially opens menu, not hovermenu, and then subsequent mouseovers create hovermenus), so not sure e.g. if i am running into the (2) for the catch-22? https://codesandbox.io/s/restless-leftpad-p04dv3?file=/src/App.js