Scroll issue when navigation with keyboard

[nakah]

Provide a general summary of the issue here

RadioGroup, CheckBoxGroup and Switch components are behaving strangely when used navigating with Tab key on page where "overflow: hidden" has been set on html element.
The browser (Edge) doesn't scroll onto the component and also creates a blank space at the bottom. On Firefox, the blank space is not created but it doesn't scroll onto the component.

🤔 Expected Behavior?

Should scroll into components

😯 Current Behavior

It's not scrolling into components and display issues on Edge

💁 Possible Solution

I don't know what's happening exactly, but I noticed that scrollTop value for html tag is added (which shouldn't be the case as it's overflow is hidden)

🔦 Context

No response

🖥️ Steps to Reproduce

Here is a Code Sandbox : Link

Open the link and navigate using Tab key. From TextField to Button component, it's working. Then navigating to RadioGroup, Switch or CheckBoxGroup it's broken.

Version

1.8.0

What browsers are you seeing the problem on?

Microsoft Edge, Firefox

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

This might be fixed by #8091. Will double check with the team member who worked on this when they're back and see if that is the case.

[yihuiliao]

Seems like that PR has been merged. Mind checking if it resolves your use case?

[nakah]

I reproduced it with the latest version available (1.8.0). If this PR is in this release then the issue is not fixed.

[yihuiliao]

Apologies, I should've specified to use the nightlies. Also, I realized that the PR above only affects S2 components but you are using RAC. That said, I think you'll need to take a similar approach as that PR and apply position relative to the RadioGroup, Switch, and CheckboxGroup to fix your issue. See codesandbox

[nakah]

Thanks! I applied "position: relative" and it worked.