Skip to content

ariaHideOutside sets inert on elements within the visible nodes #9364

Description

@alirezamirian

Provide a general summary of the issue here

When rendering ReactQuill editor in a modal overlay, it sometimes stop working due to inert attribute being set on the content. See reproduction example for more details.

🤔 Expected Behavior?

Dom mutations inside a dialog should not break the UI due to inert attribute being added to the elements within the currently open modal overlay.

😯 Current Behavior

When the DOM inside the modal overlay is mutated, ariaHideOutside wrongly detects some dom elements inside the modal overlay as outside and adds inert attribute to them.

💁 Possible Solution

The issue seems to be in the logic in the MutationObserver callback in ariaHideOutside, but I haven't debugged it to have a solution.

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/2nc7kmau-glhglehh?file=src%2FExample.tsx

Version

react-aria-components 1.14.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Haven't tested in other browsers.

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions