[Menu]: Glitchy submenu visibility logic

[Oleh-Ivankiv]

🐛 Bug report

The conditional logic that opens/closes submenus is imperfect, leading to a bug.

When the Menu.TriggerItem is hovered, its Menu.Content is revealed.
It keeps the Menu.Content open as long as the Menu.TriggerItem is hovered.
If a cursor moves outside of the Menu.TriggerItem, there are two different outcomes:

1. If the Menu.Content WASN'T hovered before, submenu will immediately close.
2. If the Menu.Content WAS hovered before, submenu will stay open until another submenu gets reveled or its parent menu gets closed.

My claim is that the first condition should be improved to make user experience smoother. Otherwise, we get the following outcome — when you move the cursor from one Menu.TriggerItem to a neighboring Menu.TriggerItem, sometimes the next Menu.Content appears for a brief moment and then closes unexpectedly.

NoGap.mov

FlexGap.mov

This problem was raised in the following Github issue: #2811. But unfortunately it got closed due to inactivity.

💥 Steps to reproduce

1. Go to StackBlitz
2. Click either on "Open menu with no gap", "Open menu with flex gap" or "Open menu with physical gap".
3. Hover over any Menu.TriggerItem to open its Menu.Content.
4. Move the mouse cursor to adjacent Menu.TriggerItem
5. Sometimes the next Menu.Content opens and then immediately closes.

💻 Link to reproduction

CodeSandbox reproduction: https://stackblitz.com/edit/solidjs-templates-dc31tmxo?file=src%2FApp.jsx

🧐 Expected behavior

No glitchy behavior when hovering over submenu trigger items.

🧭 Possible Solution

When checking whether a submenu should be closed, make sure that the mouse cursor is either not within the parent menu or (alternatively) sufficiently far away from the Menu.TriggerItem bounding rect (maybe 4-8 pixels?).

🌍 System information

Software	Version(s)
Zag Version	5.30.0 (Solid version)
Browser	Google Chrome 144.0.7559.97
Operating System	macOS 15.7.3