adobe / adobe/react-spectrum

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

Open
#8,181 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

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

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

https://github.com/user-attachments/assets/62aaedc5-bebf-4666-92b5-be54dc97279a

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.