@radix-ui/react-dialog: Disable scroll in the shadow dom.

[nayounsang]

Bug report

Current Behavior

This is unable to scroll.

      <DialogRoot>
        <DialogTrigger asChild>
          <Button>
            Open
          </Button>
        </DialogTrigger>
        {container && (
          <DialogPortal container={container}>
            <DialogOverlay className="fixed inset-0" />
            <DialogContent
              className={clsx(
                "fixed",
                "h-[300px]",
                "overflow-y-scroll"
              )}
            >
              <div className="h-[600px] bg-red-500">
                   SCROLLLLl!!!
              </div>
            </DialogContent>
          </DialogPortal>
        )}
      </DialogRoot>

But, If I remove the DialogOverlay, It is able to scroll.
I render all my content inside a custom portal, and the portal itself exists inside shadow dom.

Expected behavior

• Scroll

Reproducible example

CodeSandbox Template

1. Make shadow dom with import root from "react-shadow";.
2. Setting custom portal

          <div ref={ref} className="fixed z-[9999] inset-0">
            {ref && children}
          </div>

3. <DialogPortal container={container}>
4. Render dialog with overlay and content.

Suggested solution

Additional context

It works fine without shadow dom.
I think it has to do with the logic inside the overlay that blocks scrolling.

Your environment

Software	Name(s)	Version
Radix Package(s)	"@radix-ui/react-dialog	1.1.6
React	n/a	18
Browser	chrome	134.0.6998.118
Assistive tech
Node	n/a	20.15
npm/yarn/pnpm	yarn	4.5.3
Operating System	mac	14

[dugi-x]

If you're using shadcn/ui and running into scroll issues inside a Shadow DOM, here's the fix:
Edit components/ui/dialog.jsx and locate the line: <DialogPrimitive.Content Then update it to:

<DialogPrimitive.Content
  onWheel={(e) => e.stopPropagation()}
  onTouchMove={(e) => e.stopPropagation()}

This prevents scroll events from bubbling out of the ShadowRoot and restores normal scroll behavior inside the dialog content.