Merge pull request #1269 from janpaepke/fix/clickable-mouseover-listener-not-attached

fix: keep clickable tooltips open while pointer moves to body

Author: danielbarion

src/components/Tooltip/Tooltip.tsx

@@ -452,6 +452,7 @@ const Tooltip = ({
     lastFloatPosition,
     openEvents,
     openOnClick,
+    rendered,
     setActiveAnchor,
     show,
     tooltipHideDelayTimerRef,

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<IPosition | null>
   openEvents?: AnchorOpenEvents
   openOnClick: boolean
+  rendered: boolean
   setActiveAnchor: (anchor: HTMLElement | null) => void
   show: boolean
   tooltipHideDelayTimerRef: RefObject<NodeJS.Timeout | null>
@@ -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

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()