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

[jeffijoe]

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:

listbox-issue-encoded.mp4

💁 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:

🖥️ 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]

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

[LFDanLu]

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]

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

[deebov]

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