From 64469cf4171b9ba24281689a93dd8f4f46a4eb82 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 23 Jan 2024 17:03:42 +0530 Subject: [PATCH 1/6] fix: Chat - Hover color is not displayed even on move of cursor on changing windows and back. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 23 ++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index 028fdd30cf35..724807788ee2 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,17 +76,25 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: }, [isHovered, elementRef]); useEffect(() => { - const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false); + const unsetHoveredWhenDocumentIsHidden = () => { + if (document.visibilityState !== 'hidden' || !isHovered) { + return; + } + + isVisibiltyHidden.current = true; + setIsHovered(false); + }; document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); - }, []); + }, [isHovered]); const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]); const childOnMouseEnter = child.props.onMouseEnter; const childOnMouseLeave = child.props.onMouseLeave; + const childOnMouseMove = child.props.onMouseMove; const hoverAndForwardOnMouseEnter = useCallback( (e: MouseEvent) => { @@ -116,11 +125,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 && !isHovered ? {onMouseMove: handleAndForwardOnMouseMove} : null), }); } From 8a1f7ef3f5472634a163ff759a2452b3dc1da44c Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 23 Jan 2024 18:25:44 +0530 Subject: [PATCH 2/6] fix: useEffect dependencies. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index 724807788ee2..59343c43c2a2 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -73,7 +73,8 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: document.addEventListener('mouseover', unsetHoveredIfOutside); return () => document.removeEventListener('mouseover', unsetHoveredIfOutside); - }, [isHovered, elementRef]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [elementRef]); useEffect(() => { const unsetHoveredWhenDocumentIsHidden = () => { @@ -139,7 +140,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: onMouseEnter: hoverAndForwardOnMouseEnter, onMouseLeave: unhoverAndForwardOnMouseLeave, onBlur: unhoverAndForwardOnBlur, - ...(isVisibiltyHidden.current && !isHovered ? {onMouseMove: handleAndForwardOnMouseMove} : null), + ...(isVisibiltyHidden.current && !isHovered ? {onMouseMove: handleAndForwardOnMouseMove} : {}), }); } From 5b2c23484e844c19718cd217249ced88711a9445 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 23 Jan 2024 18:28:04 +0530 Subject: [PATCH 3/6] fix: useEffect dependencies. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 29 +++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index 59343c43c2a2..c3b6caeace6c 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -73,23 +73,26 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: document.addEventListener('mouseover', unsetHoveredIfOutside); return () => document.removeEventListener('mouseover', unsetHoveredIfOutside); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [elementRef]); + }, [isHovered, elementRef]); - useEffect(() => { - const unsetHoveredWhenDocumentIsHidden = () => { - if (document.visibilityState !== 'hidden' || !isHovered) { - return; - } + useEffect( + () => { + const unsetHoveredWhenDocumentIsHidden = () => { + if (document.visibilityState !== 'hidden' || !isHovered) { + return; + } - isVisibiltyHidden.current = true; - setIsHovered(false); - }; + isVisibiltyHidden.current = true; + setIsHovered(false); + }; - document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); - return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); - }, [isHovered]); + return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [], + ); const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]); From 47c0676fc1185c74d1e73d3da5a8f2bb9892e143 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 23 Jan 2024 19:07:01 +0530 Subject: [PATCH 4/6] minor fix. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 28 +++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index c3b6caeace6c..ed4faf621372 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -75,24 +75,20 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: return () => document.removeEventListener('mouseover', unsetHoveredIfOutside); }, [isHovered, elementRef]); - useEffect( - () => { - const unsetHoveredWhenDocumentIsHidden = () => { - if (document.visibilityState !== 'hidden' || !isHovered) { - return; - } - - isVisibiltyHidden.current = true; - setIsHovered(false); - }; + useEffect(() => { + const unsetHoveredWhenDocumentIsHidden = () => { + if (document.visibilityState !== 'hidden') { + return; + } - document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + isVisibiltyHidden.current = true; + setIsHovered(false); + }; - return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [], - ); + document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + + return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden); + }, []); const child = useMemo(() => getReturnValue(children, !isScrollingRef.current && isHovered), [children, isHovered]); From 7bc83b012fb405aa3f674215107a780d4561ea37 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 23 Jan 2024 19:55:09 +0530 Subject: [PATCH 5/6] fix conditional. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index ed4faf621372..1965f11caab5 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -98,6 +98,9 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: const hoverAndForwardOnMouseEnter = useCallback( (e: MouseEvent) => { + if (isVisibiltyHidden.current) { + isVisibiltyHidden.current = false; + } updateIsHovered(true); childOnMouseEnter?.(e); }, @@ -139,7 +142,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: onMouseEnter: hoverAndForwardOnMouseEnter, onMouseLeave: unhoverAndForwardOnMouseLeave, onBlur: unhoverAndForwardOnBlur, - ...(isVisibiltyHidden.current && !isHovered ? {onMouseMove: handleAndForwardOnMouseMove} : {}), + ...(isVisibiltyHidden.current ? {onMouseMove: handleAndForwardOnMouseMove} : {}), }); } From 8b162a851230340cddfed3b44400685189cd536c Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 24 Jan 2024 06:11:12 +0530 Subject: [PATCH 6/6] remove redundant code. Signed-off-by: Krishna Gupta --- src/components/Hoverable/ActiveHoverable.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx index 1965f11caab5..4bc56d35af45 100644 --- a/src/components/Hoverable/ActiveHoverable.tsx +++ b/src/components/Hoverable/ActiveHoverable.tsx @@ -98,9 +98,7 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: const hoverAndForwardOnMouseEnter = useCallback( (e: MouseEvent) => { - if (isVisibiltyHidden.current) { - isVisibiltyHidden.current = false; - } + isVisibiltyHidden.current = false; updateIsHovered(true); childOnMouseEnter?.(e); },