We're facing some issues similar to this when rendering within an iframe. Our current problem is that the Dialog.Portal is rendering within the root document instead of in the nearest document (we're running it in same-origin on localhost).

Shouldn't the Portal's default behaviour be to attach it to the nearest body node, in this case the iframe's? I'm not entirely sure what should be the behaviour here since I only have limited experience with iframes 😅

We are stuck because of this so I opened a PR. It includes some of the important components

Is there any update on this issue ?

any updates?

Chiming in on this, we are having a similar issue. We are running react on our main document, but then portaling into an iframe some other react components, including some radix primitives. Everything works except the focus guard is being put onto the main document, not the iframe, and I'm assuming event listeners as well. This is a pretty major issue for us as it means we can't use radix at all for iframe portaled components, and that severely breaks our UI consistency.

Has anyone found a patch to make this work (even it's just a workaround)?

We've run into this as well in our project. A solution or workaround would be greatly appreciated.

Hitting the same issue. Has anyone found a solution or a workaround?

Here's the solution we went with:

import * as DialogPrimitive from '@radix-ui/react-dialog'
import { useState } from 'react'

import { useSafeLayoutEffect } from '../../../hooks/use-safe-layout-effect'

type DialogPortalProps = {
  children: React.ReactNode
}
/**
 * This component wraps Radix's Portal implementation to handle SSR issues
 * as well as portalling to the wrong body element when rendering in an iframe.
 */
export function DialogPortal(props: DialogPortalProps) {
  const { children } = props
  const [tempNode, setTempNode] = useState<HTMLElement | null>(null)
  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null)

  useSafeLayoutEffect(() => {
    if (!tempNode) return

    const portalNode = tempNode.ownerDocument.body

    setPortalNode(portalNode)
  }, [tempNode])

  return portalNode ? (
    <DialogPrimitive.Portal container={portalNode}>
      {children}
    </DialogPrimitive.Portal>
  ) : (
    <span
      ref={(el) => {
        if (el) setTempNode(el)
      }}
    />
  )
}

Very long since I wrote the code so maybe it could be simplified a little. But hopefully it's helpful to someone!

@hugotiger Yout solution just sets container, this can be done separately. But current issue is about document event handlers inside iframes.

Still waiting for fix