diff --git a/packages/gamut/src/Tip/shared/FloatingTip.tsx b/packages/gamut/src/Tip/shared/FloatingTip.tsx index e3a85bdbdd..c448786d23 100644 --- 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 = ({ 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 index 8950cb350c..71c5a82c2c 100644 --- 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 = ({