Fix: Compose child refs in AnimatePresence popLayout so external refs are preserved

Author: rortan134

packages/framer-motion/src/components/AnimatePresence/PopChild.tsx

@@ -5,6 +5,7 @@ import * as React from "react"
 import { useContext, useId, useInsertionEffect, useRef } from "react"
 
 import { MotionConfigContext } from "../../context/MotionConfigContext"
+import { useComposedRefs } from "./use-composed-ref"
 
 interface Size {
     width: number
@@ -71,6 +72,10 @@ export function PopChild({ children, isPresent, anchorX, root }: Props) {
         right: 0,
     })
     const { nonce } = useContext(MotionConfigContext)
+    const composedRef = useComposedRefs(
+        ref,
+        (children as { ref?: React.Ref<HTMLElement> })?.ref
+    )
 
     /**
      * We create and inject a style block so we can apply this explicit
@@ -92,7 +97,7 @@ export function PopChild({ children, isPresent, anchorX, root }: Props) {
         const style = document.createElement("style")
         if (nonce) style.nonce = nonce
 
-        const parent = root ?? document.head;
+        const parent = root ?? document.head
         parent.appendChild(style)
 
         if (style.sheet) {
@@ -116,7 +121,7 @@ export function PopChild({ children, isPresent, anchorX, root }: Props) {
 
     return (
         <PopChildMeasure isPresent={isPresent} childRef={ref} sizeRef={size}>
-            {React.cloneElement(children as any, { ref })}
+            {React.cloneElement(children as any, { ref: composedRef })}
         </PopChildMeasure>
     )
 }

packages/framer-motion/src/components/AnimatePresence/use-composed-ref.ts

@@ -0,0 +1,59 @@
+import * as React from "react"
+
+type PossibleRef<T> = React.Ref<T> | undefined
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T): void | (() => void) {
+    if (typeof ref === "function") {
+        return ref(value)
+    } else if (ref !== null && ref !== undefined) {
+        ;(ref as React.MutableRefObject<T>).current = value
+    }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    return (node) => {
+        let hasCleanup = false
+        const cleanups = refs.map((ref) => {
+            const cleanup = setRef(ref, node)
+            if (!hasCleanup && typeof cleanup === "function") {
+                hasCleanup = true
+            }
+            return cleanup
+        })
+        // React <19 will log an error to the console if a callback ref returns a
+        // value. We don't use ref cleanups internally so this will only happen if a
+        // user's ref callback returns a value, which we only expect if they are
+        // using the cleanup functionality added in React 19.
+        if (hasCleanup) {
+            return () => {
+                for (let i = 0; i < cleanups.length; i++) {
+                    const cleanup = cleanups[i]
+                    if (typeof cleanup === "function") {
+                        cleanup()
+                    } else {
+                        setRef(refs[i], null)
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(composeRefs(...refs), refs)
+}
+
+export { useComposedRefs }