fix(CompositeBar): fix stucking multipleTooltip (#117)

* fix(CompositeBar): fix stucking multipleTooltip * fix(storybook): add focus on story iframe
gravity-ui · Oct 1, 2023 · be6534e · be6534e
1 parent 177cfd5
commit be6534e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/.storybook/focus-addon/register.tsx 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
@@ -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
@@ -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}