FocusScope with contain prevents clicking buttons in scrollable content

[msobiecki]

Provide a general summary of the issue here

When using a scrollable container with an Input at the top and a Button at the bottom, and wrapping the container with FocusScope with the contain prop, it becomes impossible to click the button. The FocusScope continuously scrolls back to the input at the top, keeping it focused and preventing interaction with the button at the bottom.

🤔 Expected Behavior?

• The button should be clickable.
• FocusScope should not automatically scroll back to the input or keep it focused when the user tries to interact with other elements in the scrollable area.

😯 Current Behavior

• Clicking the input at the top of the scrollable list and then trying to click the button at the bottom causes the scroll to jump back to the input.
• The button cannot be clicked.
• The input remains focused, and the user cannot unfocus it by clicking elsewhere.

💁 Possible Solution

No response

🔦 Context

This issue affects any scrollable form or panel where users need to interact with multiple elements, such as inputs and buttons, within the same container. In my case, I have a form with a scrollable list of inputs and a submit button at the bottom. When FocusScope with contain is applied, users cannot click the button after focusing an input, making the form unusable.

🖥️ Steps to Reproduce

1. Open the sandbox: https://codesandbox.io/p/sandbox/objective-leftpad-lq6c43?file=%2Fsrc%2FApp.js%3A33%2C1
2. Click the input at the top of the scrollable content.
3. Try clicking the button at the bottom.

Version

react-aria 3.45.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, I'm having trouble reproducing the problem though. I followed the instructions with a Mouse in Chrome.

Are there any other conditions to be aware of?

[msobiecki]

Thanks for the issue, I'm having trouble reproducing the problem though. I followed the instructions with a Mouse in Chrome.

Are there any other conditions to be aware of?

I will try to prepare examples as much as possible. Here are the examples I have at the moment.

MacBook Safari 26:
Every click takes me to the top of the list:
https://github.com/user-attachments/assets/a46600de-88c6-4834-beb5-a3b6c522353e

IOS 26.2:
Here there appears to be a race condition: every tap/click outside the input restores focus to the input (it’s impossible to leave it) and scrolls back to the input. Sometimes it’s possible to click a button, but after activating it, the focus returns to the input at top:
https://github.com/user-attachments/assets/802fcfb1-9906-4054-887e-4e8306ca5de6

Chrome 144:
In this case the button works, but when the form contains a label with a checkbox input, the label cannot be clicked and the focus is always moved to the first input. What does work is clicking directly on the checkbox input itself:
https://github.com/user-attachments/assets/5a49df93-7080-4c1d-a94d-19d4998ccaa2

[snowystinger]

Interesting, I'm not sure why focus isn't staying on the button. I thought maybe the alert was causing focus to leave and then restore would bring it back. But changing it to a console.log also didn't work https://codesandbox.io/p/sandbox/infallible-tess-cy58hy

I'm always able to press the button though, even in ios 26.2