fix: element.ref was removed in React 19 warning (#4003)

nextui-org · Nov 6, 2024 · 563c158 · 563c158
1 parent 3b21c11
commit 563c158
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/ten-paws-relate.md b/.changeset/ten-paws-relate.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": patch
+---
+
+Fix: element.ref was removed in React 19
diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx
@@ -29,9 +29,13 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     };
   }, [children]);
 
+  // Accessing the ref from props, else fallback to element.ref
+  // https://github.com/facebook/react/pull/28348
+  const childRef = child.props.ref ?? (child as any).ref;
+
   const {onPress, isDisabled, ...restProps} = useMemo(() => {
-    return getTriggerProps(mergeProps(otherProps, child.props), child.ref);
-  }, [getTriggerProps, child.props, otherProps, child.ref]);
+    return getTriggerProps(mergeProps(otherProps, child.props), childRef);
+  }, [getTriggerProps, child.props, otherProps, childRef]);
 
   // validates if contains a NextUI Button as a child
   const [, triggerChildren] = pickChildren(children, Button);