Nested menu closes on its own without clicking outside

[wyllen]

🐛 Bug report

When using the menu component with nested menus, sometimes it closes on its own without clicking outside.

💥 Steps to reproduce

1. Go to https://zagjs.com/components/react/nested-menu
2. Open the menu and quickly move from bottom to top across the various menu items.

💻 Link to reproduction

Visible on Zag.js documentation page:
https://zagjs.com/components/react/nested-menu

🧐 Expected behavior

Not closing on its own

🧭 Possible Solution

I think there's a problem with the focus management (interact outside) .

🌍 System information

Software	Version(s)
Zag Version	Latest
Browser	Chrome
Operating System	MacOs

📝 Additional information

[segunadebayo]

I can’t seem to reproduce this on my end, despite trying this several times.

Moving it to a discussion until we can reproduce it on our end

[wyllen]

Sorry for the late reply, to reproduce easily, just hover quickly several times between the last item of the menu and the outside.

[nassimbenkirane]

Personnally I could reproduce, only with the nested option

[makuko]

@segunadebayo I can reproduce this as well on the current Zag website. When using nested menus with my Angular adapter the problem was even worse and a lot easier to reproduce.

I was not easy to debug this but what I found out yesterday was that when I wrap the two events MENU_POINTERENTER and POINTER_MOVED_AWAY_FROM_SUBMENU in a setTimeout the problem is solved. It seems that there's an issue with the ordering of events.

Also when setting the debug property on the machine I noticed that the pointermove DOM event from the trackPointerMove action is not properly removed and lingers on triggering POINTER_MOVED_AWAY_FROM_SUBMENU continuously until the page is refreshed. This also leads to the submenu not being removed from the layer stack.

Unfortunately I wasn't able to nail down the problem exactly and it is not clear how much of it stems from my very early Angular version but nonetheless this should give you some hints.