adobe / adobe/react-spectrum

Inert in usePopover is set on all elements

Open
#9,259 4 comments 0 reactions 0 assignees View on GitHub
bug
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.

Image

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.