Issue with nested Popovers after upgrading react-aria-components

[NarendraKuruva]

I’ve upgraded react-aria-components in my repo from version 1.8.0 to 1.14.0.

In earlier versions (1.8.0 up to 1.10.0), when opening a popover inside another popover, interactions in both popovers worked as expected.

However, after upgrading to newer versions, when a nested popover is opened, the interactions in the parent (first) popover stop working.

Example

Here is a CodeSandbox demonstrating the issue:
https://codesandbox.io/p/sandbox/wonderful-hugle-pqynlx

Expected behavior (up to v1.10.0):

• Open the first popover
• Click the Open button to open a nested popover
• Both the nested popover and the button in the first popover remain interactive

Actual behavior (v1.11.0 and above):

• Open the first popover
• Click the Open button to open a nested popover
• Once the nested popover is open, the button in the first popover is no longer interactive

Steps to reproduce

1. Use react-aria-components@1.11.0
2. Open the first popover
3. Click the button that opens the nested popover
   → The button in the first popover is no longer interactive
4. Downgrade to react-aria-components@1.10.0 or 1.8.0
5. Repeat the same steps
6. In these versions, the button in the first popover remains interactive

@devongovett @snowystinger @LFDanLu — would appreciate any guidance on this 🙏

[snowystinger]

This is expected. Everything behind the popover is not accessible to anyone. Previously this was poorly implemented through a combination of aria-hidden, focus scope, etc. Now that browsers all support the inert attribute however, this is better implemented. Previously, you could still "sort of" interact with the trigger as you noted, but Assistive technologies and keyboard users could not. Now, it's the same for all users, you cannot interact with things that are outside of the modal.

I'm going to close this as working as expected, if you have further questions, feel free to ask them here.

[NarendraKuruva]

@snowystinger Thanks for the explanation — that makes sense, especially with the move to the inert attribute and aligning behavior across all users.

In our application, this behavior is something we relied on earlier. We were already using react-aria-components, and the previous versions supported our use case where certain interactions in the parent popover remained available even when a nested popover was open.

With the current behavior, we’re finding it difficult to offer the same interaction patterns to users, and refactoring this flow isn’t straightforward for us at the moment.

Do you have any recommendations or patterns for achieving a similar UX with the current version?
For example:

• Is there a supported way to allow limited interaction with the parent popover while a nested popover is open?
• Or would this require restructuring the UI (e.g. avoiding nested popovers, using a different overlay type, etc.)?

Any guidance on how to approach this with the current APIs would be really helpful. Thanks!

[snowystinger]

I'm not sure what it is that you're trying to build, so I can't offer much insight. If it's just choosing things, then a Menu/SubMenu pattern would probably be best. Otherwise, avoiding nested Modals is really the best thing to do.