fix(CompositeBar): fix multipleTooltip sticking (#100)

* fix(CompositeBar): fix multipleTooltip sticking * chore: fix pr * fix(AsideHeaderShowcase): reorder cases in if
gravity-ui · Sep 8, 2023 · 420bd6e · 420bd6e
1 parent 08a812a
commit 420bd6e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -48,7 +48,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
         // @ts-ignore
         eventBroker.subscribe((data: EventBrokerData<{layersCount: number}>) => {
             if (data?.eventId === 'layerschange') {
-                callback(data?.meta?.layersCount !== 0 && isModalOpen);
+                callback(isModalOpen && data?.meta?.layersCount !== 0);
             }
         });
     };

diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
@@ -53,6 +53,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
 }) => {
     const ref = useRef<List<CompositeBarItem>>(null);
     const tooltipRef = useRef<HTMLDivElement>(null);
+
     const {
         setValue: setMultipleTooltipContextValue,
         active: multipleTooltipActive,
@@ -61,10 +62,27 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     } = useContext(MultipleTooltipContext);
     const {compact} = useAsideHeaderContext();
 
+    React.useEffect(() => {
+        function handleBlurWindow() {
+            if (multipleTooltip && multipleTooltipActive) {
+                setMultipleTooltipContextValue({active: false});
+            }
+        }
+
+        window.addEventListener('blur', handleBlurWindow);
+
+        return () => {
+            window.removeEventListener('blur', handleBlurWindow);
+        };
+    }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
+
     const onTooltipMouseEnter = useCallback(
         (e) => {
             if (
+                multipleTooltip &&
+                compact &&
                 !multipleTooltipActive &&
+                document.hasFocus() &&
                 activeIndex !== lastClickedItemIndex &&
                 e.clientX <= ASIDE_HEADER_COMPACT_WIDTH
             ) {
@@ -73,11 +91,18 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                 });
             }
         },
-        [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue],
+        [
+            multipleTooltip,
+            compact,
+            multipleTooltipActive,
+            activeIndex,
+            lastClickedItemIndex,
+            setMultipleTooltipContextValue,
+        ],
     );
 
     const onTooltipMouseLeave = useCallback(() => {
-        if (multipleTooltipActive) {
+        if (multipleTooltip && multipleTooltipActive && document.hasFocus()) {
             setMultipleTooltipContextValue?.({
                 active: false,
                 lastClickedItemIndex: undefined,