adobe / adobe/react-spectrum

Combobox popover disappears during scroll

Open
#6,609 4 comments 2 reactions 0 assignees View on GitHub
ComboBox Overlays
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

Combobox and picker components have different behavior when scrolling. Specifically, the ComboBox popover disappears when scrolling the page, while the picker does not allow you to scroll when open.

### 🤔 Expected Behavior?

Combobox and picker should have similar behaviors. I prefer the current picker behavior where the page cannot be scrolled when the options are open. Inadvertent scrolling should not close the options. Additionally, if there are a ton of options that need to be scrolled it can be difficult to get to the last one without scrolling the page.

### 😯 Current Behavior

**Picker**: When a picker is open, the page cannot be scrolled. From reading through past tickets I see this is the behavior because it is difficult to keep the open options aligned to the component when things are scrolled.
**Combobox**: When a combobox is open, the page can be scrolled, but the open options disappear.

### 💁 Possible Solution

_No response_

### 🔦 Context

This behavior has changed with recent versions. We've had customer issues before where it was very difficult to select the last item in a long list. Previously a react-spectrum update fixed this issue. Now it seems a react-spectrum update has caused this issue to reoccur. We have an automated test that exercises this scenario which is now failing.

### 🖥️ Steps to Reproduce

https://react-spectrum.adobe.com/react-spectrum/Picker.html
- Open first picker example.
- Try to scroll down on the page.
- Cannot scroll when picker is open.

https://react-spectrum.adobe.com/react-spectrum/ComboBox.html
- Open first comboBox example.
- Try to scroll down on the page.
- Page scrolls and comboBox options disappear.

### Version

3.35.1

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

Firefox, Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

MacOS Sonoma 14.4.1

### 🧢 Your Company/Team

Adobe Experience Platform Web SDK

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