Skip to content

Commit

Permalink
refactor Portal to use useOnUnmount hook (#2458)
Browse files Browse the repository at this point in the history
  • Loading branch information
milhamm committed Apr 27, 2023
1 parent 74c9873 commit 4c10294
Showing 1 changed file with 10 additions and 18 deletions.
28 changes: 10 additions & 18 deletions packages/@headlessui-react/src/components/portal/portal.tsx
Expand Up @@ -19,8 +19,8 @@ import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
import { usePortalRoot } from '../../internal/portal-force-root'
import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
import { optionalRef, useSyncRefs } from '../../hooks/use-sync-refs'
import { useOnUnmount } from '../../hooks/use-on-unmount'
import { useOwnerDocument } from '../../hooks/use-owner'
import { microTask } from '../../utils/micro-task'
import { env } from '../../utils/env'

function usePortalTarget(ref: MutableRefObject<HTMLElement | null>): HTMLElement | null {
Expand Down Expand Up @@ -90,10 +90,7 @@ function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(

let ready = useServerHandoffComplete()

let trulyUnmounted = useRef(false)
useIsoMorphicEffect(() => {
trulyUnmounted.current = false

if (!target || !element) return

// Element already exists in target, always calling target.appendChild(element) will cause a
Expand All @@ -102,24 +99,19 @@ function PortalFn<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(
element.setAttribute('data-headlessui-portal', '')
target.appendChild(element)
}
}, [target, element])

return () => {
trulyUnmounted.current = true

microTask(() => {
if (!trulyUnmounted.current) return
if (!target || !element) return
useOnUnmount(() => {
if (!target || !element) return

if (element instanceof Node && target.contains(element)) {
target.removeChild(element)
}
if (element instanceof Node && target.contains(element)) {
target.removeChild(element)
}

if (target.childNodes.length <= 0) {
target.parentElement?.removeChild(target)
}
})
if (target.childNodes.length <= 0) {
target.parentElement?.removeChild(target)
}
}, [target, element])
})

if (!ready) return null

Expand Down

2 comments on commit 4c10294

@vercel
Copy link

@vercel vercel bot commented on 4c10294 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

headlessui-vue – ./packages/playground-vue

headlessui-vue-git-main-tailwindlabs.vercel.app
headlessui-vue-tailwindlabs.vercel.app
headlessui-vue.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 4c10294 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

headlessui-react – ./packages/playground-react

headlessui-react-git-main-tailwindlabs.vercel.app
headlessui-react.vercel.app
headlessui-react-tailwindlabs.vercel.app

Please sign in to comment.