Radix Dialog: Focus trap and scrolling issues within Shadow DOM

[AKaudinov]

Bug report

I'm working on a React app that is consumed as a web component by another app. My React app uses Radix Dialogs, and I'm trying to fully contain it within a shadow DOM to prevent it from spilling out into the parent app (i.e., no uncontrolled portaling to document.body).

Current Behavior

When dialogs portal into the shadow root, the following issues occur:

• Focus trapping breaks → The user can Tab and Shift + Tab outside of the modal.
• Scrolling is locked → Mouse wheel & trackpad scrolling do not work, forcing the user to manually move the scrollbar.

RadixDialog-shadow-dom.mov

Expected behavior

User gets focused trapped within the dialog, along with a working scroll.

Reproducible example

Created an example with an "inline" web component to show the outlined issues
codesandbox example

Suggested solution

I believe this is happening because Radix’s FocusScope component is using document.activeElement when managing focus trapping and preventing scrolling.

However, when working within a shadow DOM, document.activeElement refers to the shadow host element and not the actual element inside the shadow DOM.

It could be modified to check inside the shadow root when necessary:

 document.activeElement?.shadowRoot?.activeElement || document.activeElement;

Additional context

For now, I’ve implemented manual focus trapping in my app and set modal={false} on RadixDialog.Root to re-enable scrolling. However, this required a custom overlay and additional logic to restore expected behavior.

If and when this gets fixed, it'd help a lot.

Your environment

Software	Name(s)	Version
Radix Package(s)	radix-ui/react-dialog	1.1.2 - 1.1.4
React	n/a	17 - 18
Browser	Chrome	132.0.6834.83
Assistive tech	n/a	n/a
Node	n/a	20.17
npm/yarn	pnpm	9.2.0
Operating System	Mac	15.2