Inert in usePopover is set on all elements
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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_
Contributor guide
Assessment
This issue has not been assessed yet.