diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx index a32c533..31e099f 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,29 @@ const CompositeBarView: FC = ({ } = useContext(MultipleTooltipContext); const {compact} = useAsideHeaderContext(); + React.useEffect(() => { + function handleBlurWindow() { + if (multipleTooltip) { + if (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 +93,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,