From be6534e1a6f49dd8ce1e1dde1aba837b661baf19 Mon Sep 17 00:00:00 2001
From: Angelina Gadzhieva <lunory@yandex-team.ru>
Date: Sun, 1 Oct 2023 09:17:07 +0300
Subject: [PATCH] fix(CompositeBar): fix stucking multipleTooltip (#117)

* fix(CompositeBar): fix stucking multipleTooltip

* fix(storybook): add focus on story iframe
---
 .storybook/focus-addon/register.tsx          | 11 +++++++++++
 .storybook/main.ts                           |  3 ++-
 src/components/CompositeBar/CompositeBar.tsx |  8 ++++----
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 .storybook/focus-addon/register.tsx

diff --git a/.storybook/focus-addon/register.tsx b/.storybook/focus-addon/register.tsx
new file mode 100644
index 0000000..9284281
--- /dev/null
+++ b/.storybook/focus-addon/register.tsx
@@ -0,0 +1,11 @@
+import {addons, } from '@storybook/addons';
+
+addons.register('initialFocus', () => {
+    addons.getChannel().on('currentStoryWasSet', () => focusIframe());
+})
+
+const focusIframe = () => {
+    const previewIframe: HTMLInputElement | null = document.querySelector('#storybook-preview-iframe');
+
+    previewIframe?.focus?.();
+  }
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 0d5590e..6d01b21 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -8,7 +8,8 @@ const config: StorybookConfig = {
         '@storybook/addon-interactions',
         '@storybook/preset-scss',
         'storybook-preset-inline-svg',
-        './theme-addon/register.tsx'
+        './theme-addon/register.tsx',
+        './focus-addon/register.tsx'
     ],
     framework: {
         name: '@storybook/react-webpack5',
diff --git a/src/components/CompositeBar/CompositeBar.tsx b/src/components/CompositeBar/CompositeBar.tsx
index 50021c3..85ddc6c 100644
--- a/src/components/CompositeBar/CompositeBar.tsx
+++ b/src/components/CompositeBar/CompositeBar.tsx
@@ -112,7 +112,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
 
     const onMouseEnterByIndex = useCallback(
         (itemIndex) => () => {
-            if (multipleTooltip) {
+            if (multipleTooltip && document.hasFocus()) {
                 let multipleTooltipActiveValue = multipleTooltipActive;
                 if (!multipleTooltipActive && itemIndex !== lastClickedItemIndex) {
                     multipleTooltipActiveValue = true;
@@ -139,7 +139,7 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
     );
 
     const onMouseLeave = useCallback(() => {
-        if (compact) {
+        if (compact && document.hasFocus()) {
             ref.current?.activateItem(undefined as unknown as number);
             if (
                 multipleTooltip &&
@@ -220,9 +220,9 @@ const CompositeBarView: FC<CompositeBarViewProps> = ({
                     }}
                 />
             </div>
-            {type === 'menu' && (
+            {type === 'menu' && multipleTooltip && (
                 <MultipleTooltip
-                    open={compact && multipleTooltip && multipleTooltipActive}
+                    open={compact && multipleTooltipActive}
                     anchorRef={tooltipRef}
                     placement={['right-start']}
                     items={items}