diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index c164b87515..b566967b7c 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -14,7 +14,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
-import { memo, ReactNode, useCallback, useMemo } from 'react';
+import { memo, MouseEvent, ReactNode, useCallback, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { MdDeviceHub, MdGridOn } from 'react-icons/md';
import { GoTextSize } from 'react-icons/go';
@@ -47,22 +47,22 @@ export interface InvokeTabInfo {
const tabs: InvokeTabInfo[] = [
{
id: 'txt2img',
- icon: ,
+ icon: ,
content: ,
},
{
id: 'img2img',
- icon: ,
+ icon: ,
content: ,
},
{
id: 'unifiedCanvas',
- icon: ,
+ icon: ,
content: ,
},
{
id: 'nodes',
- icon: ,
+ icon: ,
content: ,
},
];
@@ -119,6 +119,12 @@ const InvokeTabs = () => {
}
}, [dispatch, activeTabName]);
+ const handleClickTab = useCallback((e: MouseEvent) => {
+ if (e.target instanceof HTMLElement) {
+ e.target.blur();
+ }
+ }, []);
+
const tabs = useMemo(
() =>
enabledTabs.map((tab) => (
@@ -128,7 +134,7 @@ const InvokeTabs = () => {
label={String(t(`common.${tab.id}` as ResourceKey))}
placement="end"
>
-
+
{String(t(`common.${tab.id}` as ResourceKey))}
@@ -136,7 +142,7 @@ const InvokeTabs = () => {
)),
- [t, enabledTabs]
+ [enabledTabs, t, handleClickTab]
);
const tabPanels = useMemo(