`Overlay` not containing focus while using `useModalOverlay`

[ritz078]

Provide a general summary of the issue here

When using the example mentioned in https://react-spectrum.adobe.com/react-aria/useModalOverlay.html#example, the focus is not contained in the overlay.

🤔 Expected Behavior?

The overlay should be auto focused and the focus should be contained within it.

😯 Current Behavior

The focus is not contained within the overlay.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/s/cool-scooby-nswgnw?file=/src/App.js

Version

3.28.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

The reason the focus containment doesn't work is because Overlay relies on a child component calling useOverlayFocusContain to enable the FocusScope. In the docs example, we have a Dialog as a child which has useDialog calling useOverlayFocusContain. If you forgo a Dialog, you should make sure to call useModalOverlay in a child of Overlay: https://codesandbox.io/s/upbeat-bartik-cs6zs8?file=/src/Modal.js.

We can definitely make this clearer in the docs, or even change the example so useModalOverlay is moved a level down into a child of Overlay

[ritz078]

Thanks for the quick response. This is very helpful and I do agree that some information regarding this in the docs will be helpful as this dependency on Dialog is not obvious.