How to deal with react aria dialogs and third party dialogs at the same time?

[tleunen]

Hey there,

I'm facing an issue right now that I'm not sure how to resolve. I have an app which uses the Modal and Popover components from react-aria-components. These components are really great, wrap/contain focus and everything. When these open, React Aria automatically set inert on all other nodes in the body to only keep the opened popover/modal as "active".

Now the problem is this:
Within a react aria modal, I have a button to interact with a third party, when clicking that button, the third party injects an iframe in the body to render their own modal on top of the app. Right after the third party inject the iframe, the iframe gets the inert attribute from react aria it seems, making it not interactive at all.
In a way, that makes sense, React Aria doesn't know about it and still think the react aria modal is the latest active modal. But in reality it's not. So how can I make this all work with third party modals as well?

My current solution is to hijack the attribute. Adding a mutation observer on the body, listening for child nodes and removing the inert attribute that react aria added on the third party node, then adding inert on the react aria modal manually. When the third party node disappears from the dom, I revert the changes. But this looks like a very ugly hack and there must be a better solution, right?

Thanks!

[snowystinger]

Thanks for the issue, we are currently working on a better way to handle this: #8796

In the meantime, the recommendation is to add

We have data-react-aria-top-layer as an opt out, but you must manually apply it which can be difficult.