Inert in usePopover is set on all elements

[pan-alexey]

Provide a general summary of the issue here

In our project we use both Dialog and Popover. We predefine where the layers for our popover elements are rendered. The problem is that when a popover opens, there is no way to specify the parent element within which inert should be applied.

Looking at the React Aria hook, when a popover is shown, inert is applied to all elements in the body. This creates issues for us because we want inert to be scoped only to a specific container, not the entire document.

Is it possible to add a rootElement (or similar option) so that inert is applied only within that parent?

🤔 Expected Behavior?

It is possible to find out which parent to store the inert within

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L43C7-L43C11

😯 Current Behavior

inert is always set within the parent, and this parent is document.body

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L43C7-L43C11

💁 Possible Solution

Add rootElementRef to popoverContainer

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePopover.ts#L23

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePopover.ts#L126

Version

3.43.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

[snowystinger]

Looking at the React Aria hook, when a popover is shown, inert is applied to all elements in the body. This creates issues for us because we want inert to be scoped only to a specific container, not the entire document.

Can you reproduce this in a codesandbox or stackblitz? It should not apply inert on any parent of the popover

[pan-alexey]

Hello. Try opening a dialog from within a popover. In this case, due to the inert behavior, it won’t work. If inert could be controlled, or at least scoped to a specific area, such scenarios would become possible. As an option, usePopover could be extended, as shown here. Thank you very much.

https://codesandbox.io/p/devbox/elastic-benz-gj8q6q?workspaceId=ws_HCCfCpuK3jUjbui6qmaUAV

[snowystinger]

Ah, I see. So inert was already applied to the container for the Dialog, but it isn't undone when the dialog is rendered into that div. Seems like a bug in https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts
Possibly conflicting observers? Would need to dig into it more.

Is the image in the description incorrect? it looks like the dialog and popover containers are siblings. Is there any particular reason that you can't have both go to one single container? that'd simplify things and fix the issue.

[pan-alexey]

Thank you very much for reviewing this. Our core logic relies on a strict separation of layers. For example, the dialog is positioned above the content layer, but the snackbar is assigned an even higher level. We maintain a clear separation of containers for the Overlay.

As an example, I created a PR where I simply added an element indicating that nothing will be hidden above this element when a popup is modal.

https://github.com/adobe/react-spectrum/pull/9287/files