diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx b/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx index bc68ab2b67b..c36eaa739a3 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx @@ -59,6 +59,10 @@ export default function TooltipContainer( return width + height } + const clearTimers = () => { + clearTimeout(debounceTimeout.current) + } + React.useLayoutEffect(() => { const addPositionObserver = () => { if (resizeObserver.current || typeof document === 'undefined') { @@ -67,7 +71,7 @@ export default function TooltipContainer( try { resizeObserver.current = new ResizeObserver(() => { - clearTimeout(debounceTimeout.current) + clearTimers() debounceTimeout.current = setTimeout( () => forceRerender(getBodySize()), 100 @@ -80,7 +84,7 @@ export default function TooltipContainer( } } const removePositionObserver = () => { - clearTimeout(debounceTimeout.current) + clearTimers() resizeObserver.current?.disconnect() } diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx index 1ecb8cd2ee8..55b9b593ad4 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx @@ -57,6 +57,11 @@ function TooltipPortal(props: TooltipProps & TooltipPortalProps) { } } + const clearTimers = () => { + clearTimeout(tooltipPortal[id]?.delayTimeout) + clearTimeout(tooltipPortal[id]?.hiddenTimeout) + } + const removeFromDOM = (hide?: boolean) => { if (isActive && hide) { return // stop here @@ -85,8 +90,7 @@ function TooltipPortal(props: TooltipProps & TooltipPortalProps) { React.useEffect(() => { setIsMounted(true) - clearTimeout(tooltipPortal[id]?.delayTimeout) - clearTimeout(tooltipPortal[id]?.hiddenTimeout) + clearTimers() if (active) { makePortal() @@ -128,6 +132,8 @@ function TooltipPortal(props: TooltipProps & TooltipPortalProps) { } } + return clearTimers + // eslint-disable-next-line react-hooks/exhaustive-deps }, [children, active, id, hideDelay, noAnimation]) diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx b/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx index 64e1c1a2147..b1e2392f4e8 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx @@ -38,11 +38,14 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { React.useState(false) const [isMounted, setIsMounted] = React.useState(!target) - const onEnterTimeout = React.useRef() - const onLeaveTimeout = React.useRef() + const delayTimeout = React.useRef() const cloneRef = React.useRef() const targetRef = React.useRef() + const clearTimers = () => { + clearTimeout(delayTimeout.current) + } + React.useLayoutEffect(() => { targetRef.current = getRefElement(cloneRef) // eslint-disable-next-line react-hooks/exhaustive-deps @@ -57,9 +60,7 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { return () => { clearTimers() - if (targetRef.current) { - removeEvents(targetRef.current) - } + removeEvents(targetRef.current) } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) @@ -103,6 +104,7 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { } const removeEvents = (element: HTMLElement) => { + if (!element) return try { element.removeEventListener('click', onMouseLeave) element.removeEventListener('focus', onFocus) @@ -116,11 +118,6 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { } } - const clearTimers = () => { - clearTimeout(onEnterTimeout.current) - clearTimeout(onLeaveTimeout.current) - } - const onFocus = (e: MouseEvent) => { /** * VoiceOver needs to show the Tooltip in order to read the aria-describedby @@ -146,7 +143,7 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { run() } else { clearTimers() - onEnterTimeout.current = setTimeout( + delayTimeout.current = setTimeout( run, parseFloat(String(showDelay)) || 1 ) // have min 1 to make sure we are after onMouseLeave @@ -174,10 +171,7 @@ function TooltipWithEvents(props: TooltipProps & TooltipWithEventsProps) { } if (skipPortal) { - onLeaveTimeout.current = setTimeout( - run, - parseFloat(String(hideDelay)) - ) + delayTimeout.current = setTimeout(run, parseFloat(String(hideDelay))) } else { run() }