fix: forward child refs in Tooltip and TabList on React 18 (#4904)

* fix: forward child refs in Tooltip and TabList on React 18

React 18 stores refs on element.ref while React 19 stores them on
element.props.ref. Both Tooltip and TabList only read props.ref, so
on React 18 the user's ref was silently dropped during cloneElement.

Adds a getElementRef helper in eds-utils that reads from both
locations (props.ref first to avoid the React 19 deprecation warning)
and uses it in both call sites.

Closes #4898

* refactor: tighten getElementRef return type to Ref<T> | null

React's Ref<T> doesn't include undefined, so returning Ref<T> | null
matches the type expected by mergeRefs and lets TabList drop its
?? null coercion at the call site.

Author: pomfrida

packages/eds-core-react/src/components/Tabs/TabList.tsx

@@ -11,7 +11,7 @@ import {
   isValidElement,
 } from 'react'
 import styled from 'styled-components'
-import { mergeRefs } from '@equinor/eds-utils'
+import { mergeRefs, getElementRef } from '@equinor/eds-utils'
 import { TabsContext } from './Tabs.context'
 import { Variants } from './Tabs.types'
 
@@ -96,7 +96,6 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
       type ChildPropsWithRef = {
         value?: string | number
         disabled?: boolean
-        ref?: React.Ref<HTMLButtonElement>
         [key: string]: unknown
       }
 
@@ -106,7 +105,7 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
         ? controlledActive === activeTab
         : $index === activeTab
 
-      const childRef = childProps?.ref || null
+      const childRef = getElementRef<HTMLButtonElement>(child)
       const tabRef =
         isActive && childRef
           ? mergeRefs<HTMLButtonElement>(childRef, selectedTabRef)

packages/eds-core-react/src/components/Tooltip/Tooltip.tsx

@@ -17,6 +17,7 @@ import {
   typographyTemplate,
   bordersTemplate,
   mergeRefs,
+  getElementRef,
 } from '@equinor/eds-utils'
 import { tooltip as tokens } from './Tooltip.tokens'
 import {
@@ -193,11 +194,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       children as ReactElement<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
       {
         ...getReferenceProps(children.props),
-        ref: mergeRefs(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-          (children as ReactElement<any>).props.ref,
-          mergedAnchorRef,
-        ),
+        ref: mergeRefs(getElementRef<HTMLElement>(children), mergedAnchorRef),
       },
     )
 

packages/eds-utils/src/utils/getElementRef.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { createRef, type ReactElement } from 'react'
+import { getElementRef } from './getElementRef'
+
+describe('getElementRef', () => {
+  it('reads ref from props (React 19 shape)', () => {
+    const ref = createRef<HTMLDivElement>()
+    const element = {
+      type: 'div',
+      props: { ref },
+      ref: null,
+    } as unknown as ReactElement
+
+    expect(getElementRef(element)).toBe(ref)
+  })
+
+  it('falls back to element.ref (React 18 shape)', () => {
+    const ref = createRef<HTMLDivElement>()
+    const element = {
+      type: 'div',
+      props: {},
+      ref,
+    } as unknown as ReactElement
+
+    expect(getElementRef(element)).toBe(ref)
+  })
+
+  it('returns null when no ref is set', () => {
+    const element = {
+      type: 'div',
+      props: {},
+    } as unknown as ReactElement
+
+    expect(getElementRef(element)).toBeNull()
+  })
+
+  it('prefers props.ref over element.ref when both are present', () => {
+    const propsRef = createRef<HTMLDivElement>()
+    const elementRef = createRef<HTMLDivElement>()
+    const element = {
+      type: 'div',
+      props: { ref: propsRef },
+      ref: elementRef,
+    } as unknown as ReactElement
+
+    expect(getElementRef(element)).toBe(propsRef)
+  })
+})

packages/eds-utils/src/utils/getElementRef.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, Ref } from 'react'
+
+// React 18 stores the ref on `element.ref`; React 19 stores it on `element.props.ref`.
+// Read props.ref first to avoid the React 19 deprecation warning on element.ref access.
+export const getElementRef = <T = unknown>(
+  element: ReactElement,
+): Ref<T> | null => {
+  const propsRef = (element as { props?: { ref?: Ref<T> } }).props?.ref
+  if (propsRef != null) return propsRef
+  return (element as unknown as { ref?: Ref<T> }).ref ?? null
+}

packages/eds-utils/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './templates'
 export { joinHandlers } from './joinHandlers'
 export { mergeRefs } from './mergeRefs'
+export { getElementRef } from './getElementRef'
 export { setReactInputValue } from './setReactInputValue'
 export type { OverridableComponent } from './overridableComponent'
 export * from './browserUtils'