Description
Provide a general summary of the issue here
If I open a combobox popover I cannot seem to close the overlay by clicking outside of the popover IF my cursor is clicking where a GridList component is rendered. However, If I click anywhere else on the DOM, the popover closes as expected
🤔 Expected Behavior?
I expect to be able to click on the empty area of a GridList and still close my popover
😯 Current Behavior
The popover does not close when clicking on a sibling GridList element, but closes correctly if you click anywhere else in the DOM.
💁 Possible Solution
Maybe the GridList is capturing the click event and prevent this from being registered by the sibling Popover?
🔦 Context
I was trying to create a horizontally scrolling gridlist component (I think I still need layout stack for this, right?). So I gave a GridListItem a fixed width that was less than the width of the page, which leaves a whole bunch of empty space to the right of the element (assuming just one grid list item to start). I discovered that clicking in the empty space to the right of the grid list item while a popover is open doesn't close the popover
🖥️ Steps to Reproduce
https://codesandbox.io/p/devbox/small-sun-2fdpc2?workspaceId=ws_VeyR4ykdaWme1iMQigmAsK
- Click the combobox dropdown to trigger popover
- Click in the red bounding box area, popover will not close
- Click anywhere else on the screen, popover will close
Here is a quick video showing a demo as well
Screen.Recording.2025-05-02.at.2.09.07.AM.mov
Version
1.8.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Mac OS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response