diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx index 45250a6..3a48266 100644 --- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx +++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx @@ -48,7 +48,7 @@ export const AsideHeaderShowcase: FC = ({ // @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 index 2f2c5b7..2c4eb9a 100644 --- a/src/components/CompositeBar/CompositeBar.tsx +++ b/src/components/CompositeBar/CompositeBar.tsx @@ -53,6 +53,7 @@ const CompositeBarView: FC = ({ }) => { const ref = useRef>(null); const tooltipRef = useRef(null); + const { setValue: setMultipleTooltipContextValue, active: multipleTooltipActive, @@ -61,10 +62,27 @@ const CompositeBarView: FC = ({ } = 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 = ({ }); } }, - [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,