adobe / adobe/react-spectrum

ComboBox: support shouldCloseOnInteractOutside

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

Description

### Provide a general summary of the feature here

ComboBox should expose a `shouldCloseOnInteractOutside` prop, similar to what Popover already supports, to allow users to control when the ComboBox popover closes upon interacting with elements outside the input.

This is needed for use cases like building a Tag Field, where additional elements (e.g., tags) exist between the input and the trigger button, and clicking on those elements should not close the popover.

### 🤔 Expected Behavior?

ComboBox should accept a `shouldCloseOnInteractOutside` callback prop that lets users prevent the popover from closing when the user interacts with specific elements outside the input. For example:

```jsx
!containerRef.current?.contains(element)}>
...

```

### 😯 Current Behavior

ComboBox does not expose any way to customize interact-outside behavior. After https://github.com/adobe/react-spectrum/pull/9646, clicking outside the ComboBox input closes the popover. This breaks use cases like Tag Fields where tags or other interactive elements are placed alongside the input inside a shared container — clicking on those elements incorrectly closes the popover.

For a normal Popover, `shouldCloseOnInteractOutside` is available, but ComboBox does not expose a similar API.

### 💁 Possible Solution

Expose a `shouldCloseOnInteractOutside` prop on the ComboBox component, similar to how Popover already supports it. This would allow users to define which outside interactions should and should not close the popover.

### 🔦 Context

I'm building a Tag Field component. My approach is to use `menuTrigger="input"` and open/close the popover based on the container's `focusin`/`focusout` events. I also call `event.preventDefault()` on `pointerdown` for elements outside the input to prevent focus from leaving the input. This approach worked fine before the interact-outside change in PR #9646.

An alternative workaround using Autocomplete inside a dropdown was [suggested](https://github.com/adobe/react-spectrum/pull/9646#issuecomment-4013571426), but it does not work for our use case because it does not allow users to remove tags while the popover is still open — the tags need to be accessible and interactive alongside the input at all times.

Reference: https://github.com/adobe/react-spectrum/pull/9646#issuecomment-4013571426

### 💻 Examples

![Tag Field screenshot](https://github.com/user-attachments/assets/b6058414-9732-4201-a5e0-b057e42251cc)

### 🧢 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.