Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox popover disappears during scroll #6609

Open
jonsnyder opened this issue Jun 24, 2024 · 1 comment
Open

Combobox popover disappears during scroll #6609

jonsnyder opened this issue Jun 24, 2024 · 1 comment

Comments

@jonsnyder
Copy link

jonsnyder commented Jun 24, 2024

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

@reidbarber
Copy link
Member

reidbarber commented Jun 24, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants