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 = ({ 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 = ({ ); 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 = ({ }} /> - {type === 'menu' && ( + {type === 'menu' && multipleTooltip && (