[RAC] Introduce a delay for Menu's submenus closing.

[zommerberg]

Provide a general summary of the feature here

When using the react aria components' submenus they close too quickly which causes confusion when a user accidentally hovers on another item in the menu.

Here is an example of it, I have a dropdown menu in the top right corner which causes this conflict:

https://github.com/user-attachments/assets/950ee6b1-d735-4d45-9f16-222b9135fb6b

🤔 Expected Behavior?

I want to add a delay before the submenu closes. During this delay period, the code should check if the user has hovered over the submenu again. If they have, the submenu should stay open instead of closing.

😯 Current Behavior

The submenu closes immediately which doesnt allow the user to click on the submenu item.

💁 Possible Solution

No response

🔦 Context

Video included

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Maybe the timeout isn't being properly reset in useSafelyMouseToSubmenu?

[zommerberg]

I have the same issue in the official tailwindcss example, it seems like once it detects that i hover on another menu item it immediately closes the submenu (as shown in the video).

https://github.com/user-attachments/assets/8b1e15f9-415a-422d-9bed-c13fae5e6e44

It is not as obvious in the tailwindcss example because there is a lot of spacing between the elements so the user is less likely to experience that, but in my design they stick together so a user will experience it often.

Is that a bug?

[snowystinger]

This is a good guide for the expected behavior https://react-spectrum.adobe.com/blog/creating-a-pointer-friendly-submenu-experience.html

[zommerberg]

Then it seems to be a bug, the submenu closes even though it is a valid path.

Here is a more clear example that it closes even with a straight path:

https://github.com/user-attachments/assets/53010e5b-e9ee-43cf-b412-58386c9a9e58

[reidbarber]

I think this may just be an issue with the Tailwind starter. I noticed in the Submenu story we render a RAC Popover, but our custom Menu component also renders a RAC Popover. I noticed pointer events weren't being prevented on the popover like they should, and it's working as expected in the docs in React Aria and React Spectrum.

[zommerberg]

My implementations follows the official example with popover around the menu and i still have the issue which is weird.

My structure follows this:

[reidbarber]

Just tested https://github.com/adobe/react-spectrum/pull/7251 and I'm not seeing the issue in that story anymore. I'm not seeing it any the docs site examples anywhere, but if you're still seeing it somewhere, let me know.

[zommerberg]

@reidbarber You are right! I didnt see there was a hidden popup within the Menu.

The fix resolved it, thank you!