material-ui-popup-state icon indicating copy to clipboard operation
material-ui-popup-state copied to clipboard

Delay Before Popover Disappears (especially for cascading menus)

Open cmdcolin opened this issue 1 year ago • 3 comments
trafficstars

Currently, if you mouseover outside of a cascading menu for just a brief second, it closes the menu. It might be desirable to keep the menu open though

This thread titled "Delay Before Popover Appears" is kind of the inverse of this question: how can we add a delay before the popover (and specifically, the level of cascading menu that you are at) disppears?

The comment https://github.com/jcoreio/material-ui-popup-state/issues/85#issuecomment-1509099257 gives some leads that maintaing timers in refs is probably helpful. I thought specifically just debouncing the isOpen flag of the popover state would help but I think we have to maintain some timers with refs like in that comment

cmdcolin avatar Nov 08 '24 19:11 cmdcolin

Same problem,

I rather to have onMouseLeave with some distance threshold or delay, so it wont so easily accidentally close the menu and restart everything.

Relate: Debounce time for mouseover menu? - User Experience Stack Exchange https://ux.stackexchange.com/questions/94051/debounce-time-for-mouseover-menu

Norlandz avatar May 16 '25 03:05 Norlandz

I had been resistant to including this in the library since it could be accomplished in userland, but feeling more open to it now! Sorry for the delay, it has been a busy time but I hope to get to in a week or two

jedwards1211 avatar May 20 '25 20:05 jedwards1211

I ended up going on a code bender and instead of a 'delay', i sort of just disabled the onMouseLeave callback. this tends to have an effect that feels pretty ok 'user experience-wise'.

It is not quite sufficient to just disable onMouseLeave because then multiple submenus can open up at the same time, so then I made another change that listened for whether any other menuitem gets focused, and if any submenus were open before, it closes it.

I did it all in a vendored copy of the repo (linked PR above) but just adding for posterity, and that my 'issue' is effectively solved :) I tried to see if I could make an example as a demo for this repo but haven't quite got it

cmdcolin avatar Jun 02 '25 19:06 cmdcolin