From e5dadd0cad64563815433cb0051cc05722fc3446 Mon Sep 17 00:00:00 2001 From: Ayush Srivastava Date: Mon, 22 Dec 2025 21:17:17 +0530 Subject: [PATCH 1/2] Refactor ref handling in PopChild component In React 19, ref is no longer a special property on the element, Its just a normal prop so we have to do "children.props.ref" not children.ref --- .../src/components/AnimatePresence/PopChild.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx b/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx index f34e757ffb..8bf0abbd17 100644 --- a/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx +++ b/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx @@ -73,10 +73,10 @@ export function PopChild({ children, isPresent, anchorX, root }: Props) { }) const { nonce } = useContext(MotionConfigContext) const composedRef = useComposedRefs( - ref, - (children as { ref?: React.Ref })?.ref + ref, + (children as any)?.props?.ref ) - + /** * We create and inject a style block so we can apply this explicit * sizing in a non-destructive manner by just deleting the style block. From 0c8edb5d19d7b6b65cb03761a30c33fddf36932f Mon Sep 17 00:00:00 2001 From: Ayush Srivastava Date: Mon, 22 Dec 2025 22:26:57 +0530 Subject: [PATCH 2/2] Refactor ref handling in PopChild component with backward compatibility In React 19, ref is now a regular prop instead of a special property Updated PopChild to check both children.ref of React 18 and children.props.ref of React 19 for backwards compatibility. --- .../src/components/AnimatePresence/PopChild.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx b/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx index 8bf0abbd17..9dabc11c81 100644 --- a/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx +++ b/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx @@ -72,10 +72,8 @@ export function PopChild({ children, isPresent, anchorX, root }: Props) { right: 0, }) const { nonce } = useContext(MotionConfigContext) - const composedRef = useComposedRefs( - ref, - (children as any)?.props?.ref - ) + const childRef = (children as any)?.ref ?? (children as any)?.props?.ref; + const composedRef = useComposedRefs(ref, childRef); /** * We create and inject a style block so we can apply this explicit