[Menu] Dropdown does not close after clicking on another menu trigger when within a scrollable area

[tomtheun]

🐛 Bug report

When you have multiple menu's within a scrollable area clicking on menu trigger buttons one after another will not close the previous menu dropdowns.

💥 Steps to reproduce

1. Go to 'StackBlitz'
2. Click on one of the 'Actions' buttons
3. Click on another of the 'Actions' buttons
4. Click on another of the 'Actions' buttons
5. Notice that the dropdown menu's are all staying open
6. Eventually the browser tab also freezes (no clue what this might be causing)

💻 Link to reproduction

StackBlitz reproduction: https://stackblitz.com/edit/solidjs-templates-nmarsz

🧐 Expected behavior

When a menu is open and you click on the trigger button of another menu, then I would expect the first menu to close.

🧭 Possible Solution

It looks like the isEventOutside check is not working correctly, specifically the isEventWithinScrollbar check. If I understand it correctly this is to determine if someone clicked on the scrollbar (if present) or not. In the reproduction above the onScrollbarY value would return true when you click on the second menu trigger button.

When you remove the align-items: center; CSS property from the .container class (which will move it completely to the left) and opening multiple menu's after each other again, you will notice that it works as expected. In this case the onScrollbarY value would be false since both the position of the target and pointer position have changed.

🌍 System information

Software	Version(s)
Zag Version	0.77.0
Browser	Chrome (130.0.6723.59), FireFox (132.0.1)
Operating System	MacOS (14.2 (23C64))

📝 Additional information

None

[segunadebayo]

Thanks for the detailed report.

I just pushed a fix for this. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.