Use correct ownerDocument when using internal <Portal/>

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 }}
       >

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 }}
       >

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,

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}

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,22 +75,24 @@ 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) => {
       internalPortalRootRef.current = ref
     }),
     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 },

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
 }

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
 }