diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx index 33879d62892..1867188f36e 100644 --- a/packages/react/src/TooltipV2/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -1,5 +1,5 @@ -import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react' -import {useId, useProvidedRefOrCreate, useOnEscapePress} from '../hooks' +import React, {Children, useEffect, useState, useMemo, type ForwardRefExoticComponent, useRef} from 'react' +import {useId, useOnEscapePress, useMergedRefs} from '../hooks' import {invariant} from '../utils/invariant' import {warning} from '../utils/warning' import {getAnchoredPosition} from '@primer/behaviors' @@ -52,7 +52,7 @@ type TriggerPropsType = Pick< | 'onTouchCancel' | 'onTouchEnd' > & { - ref?: React.RefObject + ref?: React.Ref } // map tooltip direction to anchoredPosition props @@ -126,7 +126,8 @@ export const Tooltip: ForwardRefExoticComponent< ) => { const tooltipId = useId(id) const child = Children.only(children) - const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject) + const triggerRef = useRef(null) + const mergedTriggerRef = useMergedRefs(triggerRef, forwardedRef) const tooltipElRef = useRef(null) const [calculatedDirection, setCalculatedDirection] = useState(direction) @@ -284,8 +285,7 @@ export const Tooltip: ForwardRefExoticComponent< <> {React.isValidElement(child) && React.cloneElement(child as React.ReactElement, { - // @ts-expect-error it needs a non nullable ref - ref: triggerRef, + ref: mergedTriggerRef, // If it is a type description, we use tooltip to describe the trigger 'aria-describedby': (() => { // If tooltip is not a description type, keep the original aria-describedby