[@mantine/core] Fix error in Next.js with React 19 related to ref pro…

…p usage in Tooltip, Popover and Combobox components (#7028)
mantinedev · Nov 8, 2024 · 455e2ee · 455e2ee
1 parent 7b8d930
commit 455e2ee
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/packages/@mantine/core/src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx b/packages/@mantine/core/src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx
@@ -1,6 +1,6 @@
 import { cloneElement } from 'react';
 import { useMergedRef } from '@mantine/hooks';
-import { factory, Factory, isElement, useProps } from '../../../core';
+import { factory, Factory, getRefProp, isElement, useProps } from '../../../core';
 import { useComboboxContext } from '../Combobox.context';
 import { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';
 
@@ -76,7 +76,7 @@ export const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props,
   return cloneElement(children, {
     ...targetProps,
     ...others,
-    [refProp!]: useMergedRef(ref, ctx.store.targetRef, (children as any)?.ref),
+    [refProp!]: useMergedRef(ref, ctx.store.targetRef, getRefProp(children)),
   });
 });
 

diff --git a/packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx b/packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx
@@ -1,7 +1,7 @@
 import { cloneElement } from 'react';
 import cx from 'clsx';
 import { useMergedRef } from '@mantine/hooks';
-import { factory, Factory, isElement, useProps } from '../../../core';
+import { factory, Factory, getRefProp, isElement, useProps } from '../../../core';
 import { usePopoverContext } from '../Popover.context';
 
 export interface PopoverTargetProps {
@@ -41,7 +41,7 @@ export const PopoverTarget = factory<PopoverTargetFactory>((props, ref) => {
 
   const forwardedProps: any = others;
   const ctx = usePopoverContext();
-  const targetRef = useMergedRef(ctx.reference, (children as any).ref, ref);
+  const targetRef = useMergedRef(ctx.reference, getRefProp(children), ref);
 
   const accessibleProps = ctx.withRoles
     ? {

diff --git a/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx b/packages/@mantine/core/src/components/Tooltip/Tooltip.tsx
@@ -8,6 +8,7 @@ import {
   Factory,
   getDefaultZIndex,
   getRadius,
+  getRefProp,
   getThemeColor,
   isElement,
   useDirection,
@@ -202,7 +203,7 @@ export const Tooltip = factory<TooltipFactory>((_props, ref) => {
     );
   }
 
-  const targetRef = useMergedRef(tooltip.reference, (children as any).ref, ref);
+  const targetRef = useMergedRef(tooltip.reference, getRefProp(children), ref);
   const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });
 
   return (

diff --git a/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx b/packages/@mantine/core/src/components/Tooltip/TooltipFloating/TooltipFloating.tsx
@@ -7,6 +7,7 @@ import {
   Factory,
   getDefaultZIndex,
   getRadius,
+  getRefProp,
   getStyleObject,
   getThemeColor,
   isElement,
@@ -103,7 +104,7 @@ export const TooltipFloating = factory<TooltipFloatingFactory>((_props, ref) =>
     );
   }
 
-  const targetRef = useMergedRef(boundaryRef, (children as any).ref, ref);
+  const targetRef = useMergedRef(boundaryRef, getRefProp(children), ref);
 
   const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {
     children.props.onMouseEnter?.(event);

diff --git a/packages/@mantine/core/src/core/utils/get-ref-prop/get-ref-prop.ts b/packages/@mantine/core/src/core/utils/get-ref-prop/get-ref-prop.ts
@@ -0,0 +1,3 @@
+export function getRefProp(element: any) {
+  return (element as any)?.props?.ref || (element as any)?.ref;
+}
diff --git a/packages/@mantine/core/src/core/utils/index.ts b/packages/@mantine/core/src/core/utils/index.ts
@@ -30,3 +30,4 @@ export { useHovered } from './use-hovered/use-hovered';
 export { createUseExternalEvents } from './create-use-external-events/create-use-external-events';
 export { getEnv } from './get-env/get-env';
 export { memoize } from './memoize/memoize';
+export { getRefProp } from './get-ref-prop/get-ref-prop';