Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): blur tab on click

Browse Source 
Fixes issue where after clicking a tab, using the arrow keys changes tab instead of changing selected image
This commit is contained in:
psychedelicious 2023-06-09 18:20:52 +10:00
parent 68be95acbb
commit 93f3658a4a
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -14,7 +14,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice'; import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice'; 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 { useHotkeys } from 'react-hotkeys-hook';
import { MdDeviceHub, MdGridOn } from 'react-icons/md'; import { MdDeviceHub, MdGridOn } from 'react-icons/md';
import { GoTextSize } from 'react-icons/go'; import { GoTextSize } from 'react-icons/go';
@ -47,22 +47,22 @@ export interface InvokeTabInfo {
const tabs: InvokeTabInfo[] = [ const tabs: InvokeTabInfo[] = [
{ {
id: 'txt2img', id: 'txt2img',
icon: <Icon as={GoTextSize} sx={{ boxSize: 6 }} />, icon: <Icon as={GoTextSize} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
content: <TextToImageTab />, content: <TextToImageTab />,
}, },
{ {
id: 'img2img', id: 'img2img',
icon: <Icon as={FaImage} sx={{ boxSize: 6 }} />, icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
content: <ImageTab />, content: <ImageTab />,
}, },
{ {
id: 'unifiedCanvas', id: 'unifiedCanvas',
icon: <Icon as={MdGridOn} sx={{ boxSize: 6 }} />, icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
content: <UnifiedCanvasTab />, content: <UnifiedCanvasTab />,
}, },
{ {
id: 'nodes', id: 'nodes',
icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6 }} />, icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
content: <NodesTab />, content: <NodesTab />,
}, },
]; ];
@ -119,6 +119,12 @@ const InvokeTabs = () => {
} }
}, [dispatch, activeTabName]); }, [dispatch, activeTabName]);
const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
if (e.target instanceof HTMLElement) {
e.target.blur();
}
}, []);
const tabs = useMemo( const tabs = useMemo(
() => () =>
enabledTabs.map((tab) => ( enabledTabs.map((tab) => (
@ -128,7 +134,7 @@ const InvokeTabs = () => {
label={String(t(`common.${tab.id}` as ResourceKey))} label={String(t(`common.${tab.id}` as ResourceKey))}
placement="end" placement="end"
> >
<Tab> <Tab onClick={handleClickTab}>
<VisuallyHidden> <VisuallyHidden>
{String(t(`common.${tab.id}` as ResourceKey))} {String(t(`common.${tab.id}` as ResourceKey))}
</VisuallyHidden> </VisuallyHidden>
@ -136,7 +142,7 @@ const InvokeTabs = () => {
</Tab> </Tab>
</Tooltip> </Tooltip>
)), )),
[t, enabledTabs] [enabledTabs, t, handleClickTab]
); );
const tabPanels = useMemo( const tabPanels = useMemo(