fix(FloatingTip): fixes delay timeouts for hover + mouseover

Fixes FloatingTips weirdness - basically cancels the open call for Tooltips if the user doesn't hover or focus for the delay timeout
Codecademy · Oct 4, 2024 · b644cac · b644cac
1 parent 70227c5
commit b644cac
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/packages/gamut/src/Tip/shared/FloatingTip.tsx b/packages/gamut/src/Tip/shared/FloatingTip.tsx
@@ -54,22 +54,31 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
   const popoverAlignments = getPopoverAlignment({ alignment, type });
   const dims = getAlignmentWidths({ avatar, alignment, type });
 
+  let hoverDelay: NodeJS.Timeout | undefined;
+  let focusDelay: NodeJS.Timeout | undefined;
+
   const handleShowHideAction = ({ type }: FocusOrMouseEvent) => {
     if (type === 'focus' && !isOpen) {
-      runWithDelay(() => {
+      focusDelay = runWithDelay(() => {
         setIsOpen(true);
         setIsFocused(true);
       });
     }
-    if (type === 'blur' && isOpen) {
-      setIsOpen(false);
-      setIsFocused(false);
+    if (type === 'blur') {
+      if (focusDelay) clearTimeout(focusDelay);
+      if (isOpen) {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
     }
     if (type === 'mouseenter' && !isOpen) {
-      runWithDelay(() => setIsOpen(true));
+      hoverDelay = runWithDelay(() => setIsOpen(true));
     }
-    if (type === 'mouseleave' && isOpen && !isFocused) {
-      setIsOpen(false);
+    if (type === 'mouseleave') {
+      if (hoverDelay) clearTimeout(hoverDelay);
+      if (isOpen && !isFocused) {
+        setIsOpen(false);
+      }
     }
   };
 

diff --git a/packages/gamut/src/Tip/shared/utils.tsx b/packages/gamut/src/Tip/shared/utils.tsx
@@ -18,7 +18,7 @@ import {
 import { TipPlacementComponentProps, TipWrapperProps } from './types';
 
 export const runWithDelay = (func: () => void) => {
-  setTimeout(func, timingValues?.base);
+  return setTimeout(func, timingValues?.base);
 };
 
 export const getAlignmentWidths = ({