fix: debounce prevented tooltip from closing

There was an issue where the tooltip would stay open after the cursor
had already left the anchor element. The issue would arise if:
- there are two tooltip anchors A and B (same tooltip ID)
- mouse goes over A to show the tooltip, user waits for tooltip to show
- mouse quickly (within 50ms) leaves A, goes over B, then leaves B.

The tooltip component applies debouncing on the show and hide events in
case e.g. an anchor is simultaneously focused and mouseovered. If the
second leave event occurred while that debounce was still active, it was
never processed.

This commit fixes the issue by making the show and hide debounce
functions reset each other. For example, if the hide debounce has an
active timeout, calling the debounced show function will now reset the
timeout of the hide debounce.

This solution still leaves the hide/show debounces effective against
double-show/double-hide.

Author: johannkor

src/components/Tooltip/Tooltip.tsx

@@ -372,8 +372,22 @@ const Tooltip = ({
 
   // debounce handler to prevent call twice when
   // mouse enter and focus events being triggered toggether
-  const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true)
-  const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true)
+  const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true)
+  const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true)
+  // If either of the functions is called while the other is still debounced,
+  // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)
+  // sequence of events, the tooltip will stay open because the hide debounce
+  // from leave A prevented the leave B event from calling it, leaving the
+  // tooltip visible.
+  const debouncedHandleShowTooltip = (e?: Event) => {
+    internalDebouncedHandleHideTooltip.reset()
+    internalDebouncedHandleShowTooltip(e)
+  }
+  const debouncedHandleHideTooltip = () => {
+    internalDebouncedHandleShowTooltip.reset()
+    internalDebouncedHandleHideTooltip()
+  }
+
   const updateTooltipPosition = useCallback(() => {
     const actualPosition = imperativeOptions?.position ?? position
     if (actualPosition) {

src/utils/debounce.ts

@@ -12,7 +12,7 @@ const debounce = <T, A extends any[]>(
 ) => {
   let timeout: NodeJS.Timeout | null = null
 
-  return function debounced(this: T, ...args: A): void {
+  const debounced = function debounced(this: T, ...args: A): void {
     const later = () => {
       timeout = null
       if (!immediate) {
@@ -36,6 +36,16 @@ const debounce = <T, A extends any[]>(
       timeout = setTimeout(later, wait)
     }
   }
+
+  debounced.reset = () => {
+    if (!timeout) {
+      return
+    }
+    clearTimeout(timeout)
+    timeout = null
+  }
+
+  return debounced
 }
 
 export default debounce