Scrollable RadioGroup inside Popover causing scroll jump on body

[Vishal0203]

Hi all,

I'm trying to add a bunch of RadioGroup components inside my Popover. I've wrapped my component in a div with max-height and overflow properties set.

I notice that when I scroll and click the last item in my RadioGroup with limited viewport, it causes my page's body to scroll jump. I believe React aria is unable to understand whether the Radio is in view or not and tries to bring it to view.

I see that there is a scrollRef prop available for Popover component in react-aria-components but I'm unable to make it work.

I wonder if anyone had any success in doing this. I appreciate any help and suggestions. Thanks!

Attaching my code sandbox and a video demonstrating the issue.

Sandbox - https://codesandbox.io/p/devbox/react-aria-components-forked-6lndw2?file=%2Fsrc%2FPopover.tsx%3A45%2C29

Screen.Recording.2025-08-29.at.5.06.54.PM.mov

[snowystinger]

I believe touring running into this. #7728 (comment)

Can you try the suggestions there/in some of the linked issues?

[Vishal0203]

I have no idea why it worked but adding position: relative worked. Could you please explain?

[snowystinger]

There's an absolutely positioned input, to make it hidden so you can customise the styling, which was defaulting to a containing block of the popover, then it was positioned following normal rules from there. Unfortunately that results in adding space at the bottom of the block and causing scrolling.

Adding the position relative moves the containing block to a more expected element (depending on where you added it) and prevents it from being positioned outside the visible region.