diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 63310afb..be35ab86 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -76,6 +76,7 @@ const Tooltip = ({ const tooltipShowDelayTimerRef = useRef(null) const tooltipHideDelayTimerRef = useRef(null) const missedTransitionTimerRef = useRef(null) + const tooltipShowTimerRef = useRef(null) const [computedPosition, setComputedPosition] = useState({ tooltipStyles: {}, tooltipArrowStyles: {}, @@ -194,7 +195,8 @@ const Tooltip = ({ * wait for the component to render and calculate position * before actually showing */ - setTimeout(() => { + clearTimeoutRef(tooltipShowTimerRef) + tooltipShowTimerRef.current = setTimeout(() => { if (!mounted.current) { return } @@ -348,6 +350,9 @@ const Tooltip = ({ border, arrowSize, }).then((computedStylesData) => { + if (!mounted.current) { + return + } handleComputedPosition(computedStylesData) }) } @@ -759,17 +764,29 @@ const Tooltip = ({ }, [updateTooltipPosition]) useEffect(() => { - if (!contentWrapperRef?.current) { + if (!rendered || !contentWrapperRef?.current) { return () => null } + const timeoutIds: Set = new Set() const contentObserver = new ResizeObserver(() => { - setTimeout(() => updateTooltipPosition()) + const timeoutId = setTimeout(() => { + timeoutIds.delete(timeoutId) + if (!mounted.current) { + return + } + updateTooltipPosition() + }) + timeoutIds.add(timeoutId) }) contentObserver.observe(contentWrapperRef.current) return () => { contentObserver.disconnect() + timeoutIds.forEach((timeoutId) => { + clearTimeout(timeoutId) + }) + timeoutIds.clear() } - }, [content, contentWrapperRef?.current]) + }, [rendered, contentWrapperRef?.current]) useEffect(() => { const anchorById = document.querySelector(`[id='${anchorId}']`) @@ -791,6 +808,7 @@ const Tooltip = ({ return () => { clearTimeoutRef(tooltipShowDelayTimerRef) clearTimeoutRef(tooltipHideDelayTimerRef) + clearTimeoutRef(tooltipShowTimerRef) } }, [])