Skip to content

ariaHideOutside sets inert on elements within the visible nodes #9364

@alirezamirian

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions