Ensure the ref is forwarded on the Transition.Child component (#1473)

* use `forwardRef` on the `Transition.Child` component

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
 - Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
 - Make the `ref` optional in the `Popover` component ([#1465](https://github.com/tailwindlabs/headlessui/pull/1465))
+- Ensure the `ref` is forwarded on the `Transition.Child` component ([#1473](https://github.com/tailwindlabs/headlessui/pull/1473))
 
 ## [@headlessui/react@1.6.1] - 2022-05-03
 

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -411,21 +411,21 @@ let TransitionRoot = forwardRefWithAs(function Transition<
   )
 })
 
-function Child<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
-  props: TransitionChildProps<TTag>
-) {
+let Child = forwardRefWithAs(function Child<
+  TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG
+>(props: TransitionChildProps<TTag>, ref: MutableRefObject<HTMLElement>) {
   let hasTransitionContext = useContext(TransitionContext) !== null
   let hasOpenClosedContext = useOpenClosed() !== null
 
   return (
     <>
       {!hasTransitionContext && hasOpenClosedContext ? (
-        <TransitionRoot {...props} />
+        <TransitionRoot ref={ref} {...props} />
       ) : (
-        <TransitionChild {...props} />
+        <TransitionChild ref={ref} {...props} />
       )}
     </>
   )
-}
+})
 
 export let Transition = Object.assign(TransitionRoot, { Child, Root: TransitionRoot })