improve requiresRef check

Also ensure that a ref is required if the `as` prop is provided and it's not a `Fragment`
tailwindlabs · Apr 18, 2024 · 40370c4 · 40370c4
1 parent 3fb4a9d
commit 40370c4
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -292,7 +292,15 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
     ...rest
   } = props as typeof props
   let container = useRef<HTMLElement | null>(null)
-  let requiresRef = Boolean(enter || enterFrom || enterTo || leave || leaveFrom || leaveTo)
+  let requiresRef = Boolean(
+    enter ||
+      enterFrom ||
+      enterTo ||
+      leave ||
+      leaveFrom ||
+      leaveTo ||
+      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
+  )
   let transitionRef = useSyncRefs(...(requiresRef ? [container, ref] : ref === null ? [] : [ref]))
   let strategy = rest.unmount ?? true ? RenderStrategy.Unmount : RenderStrategy.Hidden
 
@@ -504,7 +512,8 @@ function TransitionRootFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_C
       props.enterTo ||
       props.leave ||
       props.leaveFrom ||
-      props.leaveTo
+      props.leaveTo ||
+      (props.as ?? DEFAULT_TRANSITION_CHILD_TAG) !== Fragment
   )
   let transitionRef = useSyncRefs(
     ...(requiresRef ? [internalTransitionRef, ref] : ref === null ? [] : [ref])