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
12.73k stars 1.09k forks source link

`scroll-padding` not respected when `ListBox` is rendered in a `Popover` #7037

Open jeffijoe opened 2 weeks ago

jeffijoe commented 2 weeks ago

Provide a general summary of the issue here

When a ListBox which contains scroll-padding styles is rendered in a Popover, the scroll padding is not respected. For example, the contact list example uses and shows the usefulness of scroll padding, but if that contact list was to be rendered in a popover, it would result in a bad keyboard experience as the focused item may be obscured by a sticky header.

🤔 Expected Behavior?

Scroll padding should work regardless of whether the listbox is rendered in a popover.

😯 Current Behavior

The scroll padding during keyboard navigation is not respected, resulting in any sticky headers clipping the focused item.

The following video is from the code sandbox reproduction:

https://github.com/user-attachments/assets/1b748c0a-61f0-413f-a3b1-995879c1fc54

💁 Possible Solution

I thought it was a general browser issue with scroll padding and having the scroll container hosted in a non-static container. I tried placing it in a simple div with position: absolute|fixed but the issue did not reproduce. It was only inside the popover I could reproduce it.

🔦 Context

My use case is a Select with sticky headers:

image

🖥️ Steps to Reproduce

See this code sandbox which includes both a reproduction and an option to render the list box outside a popover to observe that it works correctly otherwise.

Version

RAC 1.3.3, RA 3.34.3

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 2 weeks ago

@LFDanLu I think you've been looking at some scroll-padding issues in Table. Anything related to your findings here?

LFDanLu commented 1 week ago

https://issues.chromium.org/issues/365913982 which came from that Table investigation definitely shows up as an issue for when the ListBox isn't rendered in a Popover, but I'm not sure that is the reason for the "in popover" behavior that is being exhibited here since increases to the scroll-padding doesn't seem to affect the positioning at all still.

eithermonad commented 1 week ago

I see the same erroneous behavior in Firefox Developer Edition 131.0b7 (aarch64).

deebov commented 1 week ago

We're having the issue too. Has anyone found a good workaround for this yet?