ComboBox Popover does not close when clicking on a sibling GridList component

[uncvrd]

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

1. Click the combobox dropdown to trigger popover
2. Click in the red bounding box area, popover will not close
3. 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

[snowystinger]

I can't access the codesandbox, could you make sure it's set to public?

Combobox uses focus/blur to hide the popover. It appears that the GridList isn't getting focus for some reason, but I'm not sure why yet.

[uncvrd]

@snowystinger sorry about that, feel free to give it another shot now

https://codesandbox.io/p/devbox/small-sun-2fdpc2?workspaceId=ws_VeyR4ykdaWme1iMQigmAsK

[snowystinger]

Thanks, it looks like this onMouseDown preventDefault is at fault here

react-spectrum/packages/@react-aria/selection/src/useSelectableCollection.ts

Line 547 in b0c0454

onMouseDown(e) {

since it prevents focus from moving elsewhere and so no blur happens on the combobox.

Will need to adjust the logic there. I think we've adjusted this a couple times and it was non-trivial. Will need to come up with some other ideas for this.

[uncvrd]

Ah...yea that would make sense! All good, glad you've found the culprit at least.