Skip to content

Combobox popover disappears during scroll #6609

@jonsnyder

Description

@jonsnyder

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

Activity

reidbarber

reidbarber commented on Jun 24, 2024

@reidbarber
Member

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.

ashleyryan

ashleyryan commented on Jun 24, 2025

@ashleyryan

With this Tailwind example, the Popover does not close on scroll, it stays open and scrolls with the page/trigger, but I can't figure out what is different about this implementation vs the one on the doc site:

https://codesandbox.io/p/sandbox/charming-tristan-fg6cqx

We have managed to work around it by reopening the popover on scroll, but then we run into this issue:
#6760

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @devongovett@jonsnyder@reidbarber@ashleyryan

        Issue actions

          Combobox popover disappears during scroll · Issue #6609 · adobe/react-spectrum