From 6743015d966984ad5fbc624dc73e5da3578019ce Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 12 Dec 2024 15:38:49 +0100
Subject: [PATCH 1/3] allow to pass in custom `ownerDocument` into the internal
 `<Portal>`

This allows us to use a custom `ownerDocument`. This is useful if a
`<Menu>` is rendered in an `<iframe>`, then we can use the
`ownerDocument` from the `<MenuButton>` to know where to render the
`<MenuItems>` (when portalling)
---
 .../src/components/portal/portal.tsx             | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@headlessui-react/src/components/portal/portal.tsx b/packages/@headlessui-react/src/components/portal/portal.tsx
index 4c05ce070..8c4a6d721 100644
--- a/packages/@headlessui-react/src/components/portal/portal.tsx
+++ b/packages/@headlessui-react/src/components/portal/portal.tsx
@@ -25,12 +25,10 @@ import type { Props } from '../../types'
 import { env } from '../../utils/env'
 import { forwardRefWithAs, useRender, type HasDisplayName, type RefProp } from '../../utils/render'
 
-function usePortalTarget(ref: MutableRefObject<HTMLElement | null>): HTMLElement | null {
+function usePortalTarget(ownerDocument: Document | null): HTMLElement | null {
   let forceInRoot = usePortalRoot()
   let groupTarget = useContext(PortalGroupContext)
 
-  let ownerDocument = useOwnerDocument(ref)
-
   let [target, setTarget] = useState(() => {
     // Group context is used, but still null
     if (!forceInRoot && groupTarget !== null) return groupTarget.current ?? null
@@ -77,13 +75,14 @@ export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> =
   PortalPropsWeControl,
   {
     enabled?: boolean
+    ownerDocument?: Document | null
   }
 >
 
 let InternalPortalFn = forwardRefWithAs(function InternalPortalFn<
   TTag extends ElementType = typeof DEFAULT_PORTAL_TAG,
 >(props: PortalProps<TTag>, ref: Ref<HTMLElement>) {
-  let theirProps = props
+  let { ownerDocument: incomingOwnerDocument = null, ...theirProps } = props
   let internalPortalRootRef = useRef<HTMLElement | null>(null)
   let portalRef = useSyncRefs(
     optionalRef<(typeof internalPortalRootRef)['current']>((ref) => {
@@ -91,8 +90,9 @@ let InternalPortalFn = forwardRefWithAs(function InternalPortalFn<
     }),
     ref
   )
-  let ownerDocument = useOwnerDocument(internalPortalRootRef)
-  let target = usePortalTarget(internalPortalRootRef)
+  let defaultOwnerDocument = useOwnerDocument(internalPortalRootRef)
+  let ownerDocument = incomingOwnerDocument ?? defaultOwnerDocument
+  let target = usePortalTarget(ownerDocument)
   let [element] = useState<HTMLDivElement | null>(() =>
     env.isServer ? null : ownerDocument?.createElement('div') ?? null
   )
@@ -154,12 +154,12 @@ function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(
 ) {
   let portalRef = useSyncRefs(ref)
 
-  let { enabled = true, ...theirProps } = props
+  let { enabled = true, ownerDocument, ...theirProps } = props
 
   let render = useRender()
 
   return enabled ? (
-    <InternalPortalFn {...theirProps} ref={portalRef} />
+    <InternalPortalFn {...theirProps} ownerDocument={ownerDocument} ref={portalRef} />
   ) : (
     render({
       ourProps: { ref: portalRef },

From 1f756a39fdaeb32b3ea3d3857939622f56e3a9d4 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 12 Dec 2024 15:06:56 +0100
Subject: [PATCH 2/3] passthrough `ownerDocument` to `<Portal>`

---
 .../@headlessui-react/src/components/combobox/combobox.tsx  | 3 ++-
 .../@headlessui-react/src/components/listbox/listbox.tsx    | 3 ++-
 packages/@headlessui-react/src/components/menu/menu.tsx     | 3 ++-
 .../@headlessui-react/src/components/popover/popover.tsx    | 6 +++++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 8c395f944..cebbb74bb 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1685,6 +1685,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     actions.setOptionsElement,
     setLocalOptionsElement
   )
+  let portalOwnerDocument = useOwnerDocument(data.buttonElement || data.inputElement)
   let ownerDocument = useOwnerDocument(data.optionsElement)
 
   let usesOpenClosedState = useOpenClosed()
@@ -1819,7 +1820,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let render = useRender()
 
   return (
-    <Portal enabled={portal ? props.static || visible : false}>
+    <Portal enabled={portal ? props.static || visible : false} ownerDocument={portalOwnerDocument}>
       <ComboboxDataContext.Provider
         value={data.mode === ValueMode.Multi ? data : { ...data, isSelected }}
       >
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index fdde28dd4..65d06cff8 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -951,6 +951,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let data = useData('Listbox.Options')
   let actions = useActions('Listbox.Options')
 
+  let portalOwnerDocument = useOwnerDocument(data.buttonElement)
   let ownerDocument = useOwnerDocument(data.optionsElement)
 
   let usesOpenClosedState = useOpenClosed()
@@ -1163,7 +1164,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
   let render = useRender()
 
   return (
-    <Portal enabled={portal ? props.static || visible : false}>
+    <Portal enabled={portal ? props.static || visible : false} ownerDocument={portalOwnerDocument}>
       <ListboxDataContext.Provider
         value={data.mode === ValueMode.Multi ? data : { ...data, isSelected }}
       >
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index f93afd2ed..478b3709b 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -638,6 +638,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     useEvent((element) => dispatch({ type: ActionTypes.SetItemsElement, element })),
     setLocalItemsElement
   )
+  let portalOwnerDocument = useOwnerDocument(state.buttonElement)
   let ownerDocument = useOwnerDocument(state.itemsElement)
 
   // Always enable `portal` functionality, when `anchor` is enabled
@@ -824,7 +825,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
   let render = useRender()
 
   return (
-    <Portal enabled={portal ? props.static || visible : false}>
+    <Portal enabled={portal ? props.static || visible : false} ownerDocument={portalOwnerDocument}>
       {render({
         ourProps,
         theirProps,
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 3d772c2e0..68e11ca6b 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -888,6 +888,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     useEvent((panel) => dispatch({ type: ActionTypes.SetPanel, panel })),
     setLocalPanelElement
   )
+  let portalOwnerDocument = useOwnerDocument(state.button)
   let ownerDocument = useOwnerDocument(internalPanelRef)
 
   useIsoMorphicEffect(() => {
@@ -1080,7 +1081,10 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     <ResetOpenClosedProvider>
       <PopoverPanelContext.Provider value={id}>
         <PopoverAPIContext.Provider value={{ close, isPortalled }}>
-          <Portal enabled={portal ? props.static || visible : false}>
+          <Portal
+            enabled={portal ? props.static || visible : false}
+            ownerDocument={portalOwnerDocument}
+          >
             {visible && isPortalled && (
               <Hidden
                 id={beforePanelSentinelId}

From ad626179f5a9a367701d30c0793b3b13d8d19e7a Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 12 Dec 2024 16:19:00 +0100
Subject: [PATCH 3/3] improve `getOwnerDocument`

The `instanceof Node` ia not a good idea because `Node` is different
depending on where it runs (main document vs iframe)
---
 packages/@headlessui-react/src/utils/owner.ts | 11 +++++------
 packages/@headlessui-vue/src/utils/owner.ts   | 14 ++++++--------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/@headlessui-react/src/utils/owner.ts b/packages/@headlessui-react/src/utils/owner.ts
index 7e5ff4a3c..951c3def0 100644
--- a/packages/@headlessui-react/src/utils/owner.ts
+++ b/packages/@headlessui-react/src/utils/owner.ts
@@ -3,12 +3,11 @@ import { env } from './env'
 
 export function getOwnerDocument<T extends Element | MutableRefObject<Element | null>>(
   element: T | null | undefined
-) {
+): Document | null {
   if (env.isServer) return null
-  if (element instanceof Node) return element.ownerDocument
-  if (element?.hasOwnProperty('current')) {
-    if (element.current instanceof Node) return element.current.ownerDocument
-  }
+  if (!element) return document
+  if ('ownerDocument' in element) return element.ownerDocument
+  if ('current' in element) return element.current?.ownerDocument ?? document
 
-  return document
+  return null
 }
diff --git a/packages/@headlessui-vue/src/utils/owner.ts b/packages/@headlessui-vue/src/utils/owner.ts
index d11083c1f..75ab04cbc 100644
--- a/packages/@headlessui-vue/src/utils/owner.ts
+++ b/packages/@headlessui-vue/src/utils/owner.ts
@@ -2,15 +2,13 @@ import type { Ref } from 'vue'
 import { dom } from './dom'
 import { env } from './env'
 
-export function getOwnerDocument<T extends HTMLElement | Ref<HTMLElement | null>>(
+export function getOwnerDocument<T extends Element | Ref<Element | null>>(
   element: T | null | undefined
-) {
+): Document | null {
   if (env.isServer) return null
-  if (element instanceof Node) return element.ownerDocument
-  if (element?.hasOwnProperty('value')) {
-    let domElement = dom(element as any)
-    if (domElement) return domElement.ownerDocument
-  }
+  if (!element) return document
+  if ('ownerDocument' in element) return element.ownerDocument
+  if ('value' in element) return dom(element as any)?.ownerDocument ?? document
 
-  return document
+  return null
 }