Sub menu is flickering when it opens on the left side when there is no room on the right side.

[adam187]

🐛 Bug report

When I have a manu with a sub menu where submenu is normally opens on the right but there is not enough room for it to open on the right and it opens to the left.

In this state when you move the menu from the menu item to submenu you can see the flickering since the menu is starting to close.

💥 Steps to reproduce

1. Go to https://www.chakra-ui.com/docs/components/menu#submenu
2. Narrow down screen to foce sub menu to open on the left
3. Open submenu
4. Move mouse to submenu item

🧐 Expected behavior

Submenu should not flicker as is when it opens on the right.

🧭 Possible Solution

Looks like i got it working by applying patch

   isLeftSideSubmenu: ({ context }) => getPlacementSide(context.get("currentPlacement")) === "left",
+      isMovingTowardsSubmenu: ({ context, scope, event }) => {
+        const placement = context.get("currentPlacement");
+        if (getPlacementSide(placement) !== "left") return false;
+        
+        const menu = getContentEl(scope);
+        if (!menu) return false;
+        
+        const rect = menu.getBoundingClientRect();
+        const point = event.point;
+        
+        // Check if the mouse is moving towards the submenu area
+        // For left-side submenus, we check if mouse is moving left and within the vertical range
+        return point.x <= rect.right + 20 && 
+               point.y >= rect.top - 10 && 
+               point.y <= rect.bottom + 10;
+      },

🌍 System information

Software	Version(s)
Zag Version	1.12.2
Browser	Chrome 138
Operating System	OSX 15.5

📝 Additional information