adobe / adobe/react-spectrum

[usePopover] Non-modal popover closes on scroll events (including browser auto-scroll), making modal mode necessary but incompatible with ComboBox

Open
#9,467 6 comments 4 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

When using usePopover with isNonModal={true} in ComboBox-like components, the popover unexpectedly closes on scroll events, what may be happening on mobile devices. This includes browser auto-scroll that occurs when the keyboard opens. Switching to modal mode (isNonModal={false}) to prevent scroll-related closures makes the trigger input inaccessible, breaking the core ComboBox functionality where users need to type to filter options.

### 🤔 Expected Behavior?

When using useComboBox with usePopover:
- Page scroll must be blocked while dropdown is open
- The popover should remain open during scroll events (including browser auto-scroll on mobile when keyboard opens)
- In modal mode, the input (trigger element) should remain editable while the popover is open
- Users should be able to type into the input to filter options without the popover closing
- Keyboard navigation should work correctly
- The clear button (if present) should remain functional when the popover closes

### 😯 Current Behavior

**With isNonModal={true}:**
- On mobile devices, any scroll event (including browser's automatic scroll-to-input when keyboard opens) triggers popover closure
- Manual scroll blocking via CSS (position: fixed or overflow: hidden on body) is detected as a scroll event and closes the popover immediately on mobile

**With isNonModal={false}:**
- useOverlay blocks interaction with all elements outside the popover, including the trigger element (input)
- The input becomes unresponsive to typing, breaking the fundamental ComboBox search/filter functionality
- Attempts to work around this with shouldCloseOnInteractOutside or destructuring inputProps lead to other issues:
- Popover closes unexpectedly
- Focus is lost
- Keyboard navigation stops working

### 💁 Possible Solution

The modal overlay should allow interaction with the trigger element, or provide a configuration option to exclude the trigger from the modal blocking behavior. For ComboBox specifically, users must be able to:
- Type into the input while the popover is open (search/filter functionality)
- Maintain focus management
- Navigate options via keyboard
- Interact with auxiliary controls (clear button) after closing

Alternatively, usePopover in non-modal mode could provide better scroll handling options that don't treat all scroll events as dismissal triggers, especially distinguishing between user-initiated scroll and browser auto-scroll.

### 🔦 Context

We are implementing components that need to work reliably on mobile devices.

**Non-modal mode:** the popover may close unexpectedly on mobile due to browser-driven auto-scroll when the input is focused.
**Modal mode:** the input becomes non-interactive, breaking the core purpose of the component.

This primarily affects mobile UX in scenarios where:
Focusing the input opens the virtual keyboard, which can trigger browser auto-scroll to the field.
That auto-scroll may be interpreted as an outside interaction or scroll event.
As a result, the popover can close even though the user did not intend to dismiss it.

In such cases, users may be unable to type and filter options reliably without triggering an unintended popover closure, making the component unstable in certain mobile interactions.

### 🖥️ Steps to Reproduce

https://react-aria.adobe.com/ComboBox
https://codesandbox.io/p/sandbox/tlf9qy?file=%2Fsrc%2FApp.tsx%3A1%2C1-124%2C1

### Version

react-aria@3.43.0

### What browsers are you seeing the problem on?

Chrome, Safari

### If other, please specify.

Safari iOS, Chrome Android, Safari Desktop, Chrome Desktop

### What operating system are you using?

IOS, Android, macOS

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