From 93f3658a4a79a35c2294f20981d1b9920911d5d2 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 9 Jun 2023 18:20:52 +1000
Subject: [PATCH] fix(ui): blur tab on click

Fixes issue where after clicking a tab, using the arrow keys changes tab instead of changing selected image
---
 .../src/features/ui/components/InvokeTabs.tsx | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

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 as={GoTextSize} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={GoTextSize} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <TextToImageTab />,
   },
   {
     id: 'img2img',
-    icon: <Icon as={FaImage} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ImageTab />,
   },
   {
     id: 'unifiedCanvas',
-    icon: <Icon as={MdGridOn} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <UnifiedCanvasTab />,
   },
   {
     id: 'nodes',
-    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6 }} />,
+    icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <NodesTab />,
   },
 ];
@@ -119,6 +119,12 @@ const InvokeTabs = () => {
     }
   }, [dispatch, activeTabName]);
 
+  const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
+    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"
         >
-          <Tab>
+          <Tab onClick={handleClickTab}>
             <VisuallyHidden>
               {String(t(`common.${tab.id}` as ResourceKey))}
             </VisuallyHidden>
@@ -136,7 +142,7 @@ const InvokeTabs = () => {
           </Tab>
         </Tooltip>
       )),
-    [t, enabledTabs]
+    [enabledTabs, t, handleClickTab]
   );
 
   const tabPanels = useMemo(