search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.03k stars 1.13k forks source link

Combobox popover disappears during scroll #6609

Open jonsnyder opened 4 months ago

jonsnyder commented 4 months ago

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

https://react-spectrum.adobe.com/react-spectrum/ComboBox.html

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

reidbarber commented 4 months ago

This is the expected behavior currently. We intentionally block interaction and scrolling behind overlays until they're closed by using an underlay, however we can't do this with Combobox because the input still needs to be interactive. Ideally we would disable interaction on everything except for the Combobox's input and popover, but there isn't currently a way to do that that we're aware of.