diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index e5cfe686..4c35e0d0 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -452,6 +452,7 @@ const Tooltip = ({ lastFloatPosition, openEvents, openOnClick, + rendered, setActiveAnchor, show, tooltipHideDelayTimerRef, diff --git a/src/components/Tooltip/use-tooltip-events.tsx b/src/components/Tooltip/use-tooltip-events.tsx index b0a1bb9f..914ffae8 100644 --- a/src/components/Tooltip/use-tooltip-events.tsx +++ b/src/components/Tooltip/use-tooltip-events.tsx @@ -36,6 +36,7 @@ const useTooltipEvents = ({ lastFloatPosition, openEvents, openOnClick, + rendered, setActiveAnchor, show, tooltipHideDelayTimerRef, @@ -62,6 +63,7 @@ const useTooltipEvents = ({ lastFloatPosition: RefObject openEvents?: AnchorOpenEvents openOnClick: boolean + rendered: boolean setActiveAnchor: (anchor: HTMLElement | null) => void show: boolean tooltipHideDelayTimerRef: RefObject @@ -447,8 +449,10 @@ const useTooltipEvents = ({ debouncedShow.cancel() debouncedHide.cancel() } + // `rendered` needs to be a dependency because `tooltipRef` becomes stale when the + // tooltip is removed from / added to the DOM. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [actualOpenEvents, actualCloseEvents, float, clickable]) + }, [actualOpenEvents, actualCloseEvents, float, clickable, rendered]) // --- Effect 2: Global close events + auto-update --- // Re-runs when the global close config changes, or when the active anchor changes diff --git a/src/test/tooltip-interaction-behavior.spec.js b/src/test/tooltip-interaction-behavior.spec.js index a476901f..bbf82ff9 100644 --- a/src/test/tooltip-interaction-behavior.spec.js +++ b/src/test/tooltip-interaction-behavior.spec.js @@ -124,8 +124,12 @@ describe('tooltip interaction behavior', () => { unhoverAnchor(anchor, 0) fireEvent.mouseEnter(tooltip) + advanceTimers(150) // past clickable's 100ms hide-delay so the close timer fires await flushMicrotasks() - expect(screen.getByRole('tooltip')).toBeInTheDocument() + + const elem = screen.getByRole('tooltip') + expect(elem).toBeInTheDocument() + expect(elem).toHaveClass('react-tooltip__show') fireEvent.mouseLeave(tooltip) await flushMicrotasks()