Merge pull request #34959 from Krishna2323/krishna2323/issue/29077

fix: Chat - Hover color is not displayed even on move of cursor on window change and back.
Expensify · Jan 30, 2024 · b4fe0c8 · b4fe0c8
2 parents 8d87782 + 8b162a8
commit b4fe0c8
Showing 1 changed file with 21 additions and 1 deletion.
diff --git 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<HTMLElement | null>(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} : {}),
     });
 }