diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index 028fdd30cf35..4bc56d35af45 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -14,6 +14,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: const elementRef = useRef(null); const isScrollingRef = useRef(false); const isHoveredRef = useRef(false); + const isVisibiltyHidden = useRef(false); const updateIsHovered = useCallback( (hovered: boolean) => { @@ -75,7 +76,14 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: }, [isHovered, elementRef]); useEffect(() => { - const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false); + const unsetHoveredWhenDocumentIsHidden = () => { + if (document.visibilityState !== 'hidden') { + return; + } + + isVisibiltyHidden.current = true; + setIsHovered(false); + }; document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); @@ -86,9 +94,11 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: const childOnMouseEnter = child.props.onMouseEnter; const childOnMouseLeave = child.props.onMouseLeave; + const childOnMouseMove = child.props.onMouseMove; const hoverAndForwardOnMouseEnter = useCallback( (e: MouseEvent) => { + isVisibiltyHidden.current = false; updateIsHovered(true); childOnMouseEnter?.(e); }, @@ -116,11 +126,21 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: [child.props], ); + const handleAndForwardOnMouseMove = useCallback( + (e: MouseEvent) => { + isVisibiltyHidden.current = false; + updateIsHovered(true); + childOnMouseMove?.(e); + }, + [updateIsHovered, childOnMouseMove], + ); + return cloneElement(child, { ref: mergeRefs(elementRef, outerRef, child.ref), onMouseEnter: hoverAndForwardOnMouseEnter, onMouseLeave: unhoverAndForwardOnMouseLeave, onBlur: unhoverAndForwardOnBlur, + ...(isVisibiltyHidden.current ? {onMouseMove: handleAndForwardOnMouseMove} : {}), }); }