From 82bff21be8703f0bfb35a30afef97198cf3d3029 Mon Sep 17 00:00:00 2001 From: Chung Wei Date: Tue, 2 Apr 2024 22:04:04 +0800 Subject: [PATCH 1/2] Access ref from props before element.ref --- packages/react/slot/src/Slot.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/slot/src/Slot.tsx b/packages/react/slot/src/Slot.tsx index 6d64f512d..ed9c4b3bb 100644 --- a/packages/react/slot/src/Slot.tsx +++ b/packages/react/slot/src/Slot.tsx @@ -61,9 +61,12 @@ const SlotClone = React.forwardRef((props, forwardedRef) => const { children, ...slotProps } = props; if (React.isValidElement(children)) { + // Accessing the ref from props, else fallback to element.ref + // https://github.com/facebook/react/pull/28348 + const childrenRef = children.props.ref ?? (children as any).ref; return React.cloneElement(children, { ...mergeProps(slotProps, children.props), - ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref, + ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef, }); } From 45b510a86e6583479f82a041a3452ed965bc4e13 Mon Sep 17 00:00:00 2001 From: Chung Wei Date: Sat, 27 Apr 2024 15:15:19 +0800 Subject: [PATCH 2/2] Apply ref access fix to presence component --- packages/react/presence/src/Presence.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/presence/src/Presence.tsx b/packages/react/presence/src/Presence.tsx index 5a4fbf3a2..9669c263e 100644 --- a/packages/react/presence/src/Presence.tsx +++ b/packages/react/presence/src/Presence.tsx @@ -19,7 +19,10 @@ const Presence: React.FC = (props) => { : React.Children.only(children) ) as React.ReactElement; - const ref = useComposedRefs(presence.ref, (child as any).ref); + // Accessing the ref from props, else fallback to element.ref + // https://github.com/facebook/react/pull/28348 + const childrenRef = child.props.ref ?? (child as any).ref; + const ref = useComposedRefs(presence.ref, childrenRef); const forceMount = typeof children === 'function'; return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null; };