[RAC] Select closes immediately on Firefox when scrolled and body has overflow: hidden

[agos]

Provide a general summary of the issue here

When these three conditions are met:

• Firefox is being used
• body tag has overflow: hidden
• one of the ancestors of the Select has been scrolled from the initial position

clicking or interacting with the select with the keyboard to open it will result in the Select opening and immediately closing. Judging on which callbacks get called, it gains focus but does not lose it.

🤔 Expected Behavior?

The Select stays open

😯 Current Behavior

The Select immediately closes

💁 Possible Solution

The workaround I'll be using will be to remove overflow: hidden from the body tag

🔦 Context

No response

🖥️ Steps to Reproduce

Here is a CodeSandbox that shows the behavior. To reproduce, open the link with Firefox (I used version 133), scroll down a bit and then try to open the select.

You can also reproduce the issue on the Storybook by manually adding overflow: hidden to the body inside the iframe for the component.

Here is a video showing the example in action:

Registrazione.schermo.2024-12-30.alle.18.18.33.mov

Version

react-aria-components 1.5.0, no difference on 1.4.1

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

MacOS 15.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

Looks like it broke in #7368 where we updated things to be strict compliant

[reidbarber]

Possibly will be fixed by #7541?