diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx index 40a4a9cb65..ccb0fdf0d0 100644 --- a/packages/@headlessui-react/src/components/transitions/transition.tsx +++ b/packages/@headlessui-react/src/components/transitions/transition.tsx @@ -22,7 +22,6 @@ import { } from '../../utils/render' import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed' import { match } from '../../utils/match' -import { microTask } from '../../utils/micro-task' import { useIsMounted } from '../../hooks/use-is-mounted' import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect' import { useLatestValue } from '../../hooks/use-latest-value' @@ -30,6 +29,7 @@ import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complet import { useSyncRefs } from '../../hooks/use-sync-refs' import { useTransition } from '../../hooks/use-transition' import { useEvent } from '../../hooks/use-event' +import { useDisposables } from '../../hooks/use-disposables' type ContainerElement = MutableRefObject @@ -128,6 +128,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) { let doneRef = useLatestValue(done) let transitionableChildren = useRef([]) let mounted = useIsMounted() + let d = useDisposables() let unregister = useEvent((container: ContainerElement, strategy = RenderStrategy.Hidden) => { let idx = transitionableChildren.current.findIndex(({ el }) => el === container) @@ -142,7 +143,7 @@ function useNesting(done?: () => void, parent?: NestingContextValues) { }, }) - microTask(() => { + d.microTask(() => { if (!hasChildren(transitionableChildren) && mounted.current) { doneRef.current?.() } diff --git a/packages/@headlessui-react/src/utils/disposables.ts b/packages/@headlessui-react/src/utils/disposables.ts index 0e3a7558a6..686f4fff5f 100644 --- a/packages/@headlessui-react/src/utils/disposables.ts +++ b/packages/@headlessui-react/src/utils/disposables.ts @@ -1,3 +1,5 @@ +import { microTask } from './micro-task' + export function disposables() { let disposables: Function[] = [] let queue: Function[] = [] @@ -33,6 +35,18 @@ export function disposables() { return api.add(() => clearTimeout(timer)) }, + microTask(...args: Parameters) { + let task = { current: true } + microTask(() => { + if (task.current) { + args[0]() + } + }) + return api.add(() => { + task.current = false + }) + }, + add(cb: () => void) { disposables.push(cb) return () => {