From 81817532f8fbed227fa5914bc5f240406452d22b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 23:48:32 +1000
Subject: [PATCH 1/2] fix(ui): fix tab translations

model manager was using the wrong key due to the tabs render func subbing values in. made translation key a prop of a tab item.
---
 .../web/src/features/ui/components/InvokeTabs.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index c618997f03..9eb99afa3e 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -41,6 +41,7 @@ import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
 
 export interface InvokeTabInfo {
   id: InvokeTabName;
+  translationKey: string;
   icon: ReactNode;
   content: ReactNode;
 }
@@ -48,26 +49,31 @@ export interface InvokeTabInfo {
 const tabs: InvokeTabInfo[] = [
   {
     id: 'txt2img',
+    translationKey: 'common.txt2img',
     icon: <Icon as={FaFont} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <TextToImageTab />,
   },
   {
     id: 'img2img',
+    translationKey: 'common.img2img',
     icon: <Icon as={FaImage} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ImageTab />,
   },
   {
     id: 'unifiedCanvas',
+    translationKey: 'common.unifiedCanvas',
     icon: <Icon as={MdGridOn} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <UnifiedCanvasTab />,
   },
   {
     id: 'nodes',
+    translationKey: 'common.nodes',
     icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <NodesTab />,
   },
   {
     id: 'modelManager',
+    translationKey: 'modelManager.modelManager',
     icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
     content: <ModelManagerTab />,
   },
@@ -146,12 +152,12 @@ const InvokeTabs = () => {
         <Tooltip
           key={tab.id}
           hasArrow
-          label={String(t(`common.${tab.id}` as ResourceKey))}
+          label={String(t(tab.translationKey as ResourceKey))}
           placement="end"
         >
           <Tab onClick={handleClickTab}>
             <VisuallyHidden>
-              {String(t(`common.${tab.id}` as ResourceKey))}
+              {String(t(tab.translationKey as ResourceKey))}
             </VisuallyHidden>
             {tab.icon}
           </Tab>

From be06d4c0afb2070552112dd160fa7705f250ebe4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 23:37:34 +1000
Subject: [PATCH 2/2] fix(ui): fix selection on dropdowns

Mantine's multiselect does not let you edit the search box with mouse, paste into it, etc. Normal select is fine.

I can't remember why I made Lora etc multiselects, but everything seems to work with normal selects, so I've change to that.
---
 .../components/IAIMantineMultiSelect.tsx      |  1 +
 .../common/components/IAIMantineSelect.tsx    | 26 ++++++++++++-
 .../components/ParamEmbeddingPopover.tsx      | 18 ++++-----
 .../lora/components/ParamLoraSelect.tsx       | 18 +++++----
 .../features/nodes/components/AddNodeMenu.tsx | 39 ++++++++++++-------
 5 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
index e52ec63810..dc6db707e7 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
@@ -59,6 +59,7 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         searchable={searchable}
+        maxDropdownHeight={300}
         styles={() => ({
           label: {
             color: mode(base700, base300)(colorMode),
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 80e6c24ace..99d0e8a615 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -3,7 +3,7 @@ import { Select, SelectProps } from '@mantine/core';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
-import { KeyboardEvent, memo, useCallback } from 'react';
+import { KeyboardEvent, RefObject, memo, useCallback, useState } from 'react';
 import { mode } from 'theme/util/mode';
 
 export type IAISelectDataType = {
@@ -14,10 +14,11 @@ export type IAISelectDataType = {
 
 type IAISelectProps = SelectProps & {
   tooltip?: string;
+  inputRef?: RefObject<HTMLInputElement>;
 };
 
 const IAIMantineSelect = (props: IAISelectProps) => {
-  const { searchable = true, tooltip, ...rest } = props;
+  const { searchable = true, tooltip, inputRef, onChange, ...rest } = props;
   const dispatch = useAppDispatch();
   const {
     base50,
@@ -38,7 +39,9 @@ const IAIMantineSelect = (props: IAISelectProps) => {
   } = useChakraThemeTokens();
 
   const { colorMode } = useColorMode();
+  const [searchValue, setSearchValue] = useState('');
 
+  // we want to capture shift keypressed even when an input is focused
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.shiftKey) {
@@ -57,14 +60,33 @@ const IAIMantineSelect = (props: IAISelectProps) => {
     [dispatch]
   );
 
+  // wrap onChange to clear search value on select
+  const handleChange = useCallback(
+    (v: string | null) => {
+      setSearchValue('');
+
+      if (!onChange) {
+        return;
+      }
+
+      onChange(v);
+    },
+    [onChange]
+  );
+
   const [boxShadow] = useToken('shadows', ['dark-lg']);
 
   return (
     <Tooltip label={tooltip} placement="top" hasArrow>
       <Select
+        ref={inputRef}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        onChange={handleChange}
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         searchable={searchable}
+        maxDropdownHeight={300}
         styles={() => ({
           label: {
             color: mode(base700, base300)(colorMode),
diff --git a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
index b5e96b6c92..9e4ea8c88d 100644
--- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
+++ b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
@@ -9,7 +9,7 @@ import {
 import { SelectItem } from '@mantine/core';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import IAIMantineMultiSelect from 'common/components/IAIMantineMultiSelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
 import { forEach } from 'lodash-es';
@@ -61,12 +61,12 @@ const ParamEmbeddingPopover = (props: Props) => {
   }, [embeddingQueryData, currentMainModel?.base_model]);
 
   const handleChange = useCallback(
-    (v: string[]) => {
-      if (v.length === 0) {
+    (v: string | null) => {
+      if (!v) {
         return;
       }
 
-      onSelect(v[0]);
+      onSelect(v);
     },
     [onSelect]
   );
@@ -106,16 +106,16 @@ const ParamEmbeddingPopover = (props: Props) => {
               </Text>
             </Flex>
           ) : (
-            <IAIMantineMultiSelect
+            <IAIMantineSelect
               inputRef={inputRef}
+              autoFocus
               placeholder={'Add Embedding'}
-              value={[]}
+              value={null}
               data={data}
-              maxDropdownHeight={400}
-              nothingFound="No Matching Embeddings"
+              nothingFound="No matching Embeddings"
               itemComponent={IAIMantineSelectItemWithTooltip}
               disabled={data.length === 0}
-              filter={(value, selected, item: SelectItem) =>
+              filter={(value, item: SelectItem) =>
                 item.label
                   ?.toLowerCase()
                   .includes(value.toLowerCase().trim()) ||
diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
index a87f481496..7b5aa5946b 100644
--- a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
@@ -4,7 +4,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState, stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineMultiSelect from 'common/components/IAIMantineMultiSelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectItemWithTooltip';
 import { loraAdded } from 'features/lora/store/loraSlice';
 import { MODEL_TYPE_MAP } from 'features/system/components/ModelSelect';
@@ -58,12 +58,15 @@ const ParamLoraSelect = () => {
   }, [loras, lorasQueryData, currentMainModel?.base_model]);
 
   const handleChange = useCallback(
-    (v: string[]) => {
-      const loraEntity = lorasQueryData?.entities[v[0]];
+    (v: string | null | undefined) => {
+      if (!v) {
+        return;
+      }
+      const loraEntity = lorasQueryData?.entities[v];
       if (!loraEntity) {
         return;
       }
-      v[0] && dispatch(loraAdded(loraEntity));
+      dispatch(loraAdded(loraEntity));
     },
     [dispatch, lorasQueryData?.entities]
   );
@@ -79,15 +82,14 @@ const ParamLoraSelect = () => {
   }
 
   return (
-    <IAIMantineMultiSelect
+    <IAIMantineSelect
       placeholder={data.length === 0 ? 'All LoRAs added' : 'Add LoRA'}
-      value={[]}
+      value={null}
       data={data}
-      maxDropdownHeight={400}
       nothingFound="No matching LoRAs"
       itemComponent={IAIMantineSelectItemWithTooltip}
       disabled={data.length === 0}
-      filter={(value, selected, item: SelectItem) =>
+      filter={(value, item: SelectItem) =>
         item.label?.toLowerCase().includes(value.toLowerCase().trim()) ||
         item.value.toLowerCase().includes(value.toLowerCase().trim())
       }
diff --git a/invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
index 64bc38e3bd..596c2d5ee1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/AddNodeMenu.tsx
@@ -1,15 +1,15 @@
-import 'reactflow/dist/style.css';
-import { useCallback, forwardRef } from 'react';
 import { Flex, Text } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { nodeAdded, nodesSelector } from '../store/nodesSlice';
-import { map } from 'lodash-es';
-import { useBuildInvocation } from '../hooks/useBuildInvocation';
-import { AnyInvocationType } from 'services/events/types';
-import { useAppToaster } from 'app/components/Toaster';
 import { createSelector } from '@reduxjs/toolkit';
+import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIMantineMultiSelect from 'common/components/IAIMantineMultiSelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import { map } from 'lodash-es';
+import { forwardRef, useCallback } from 'react';
+import 'reactflow/dist/style.css';
+import { AnyInvocationType } from 'services/events/types';
+import { useBuildInvocation } from '../hooks/useBuildInvocation';
+import { nodeAdded, nodesSelector } from '../store/nodesSlice';
 
 type NodeTemplate = {
   label: string;
@@ -58,24 +58,33 @@ const AddNodeMenu = () => {
     [dispatch, buildInvocation, toaster]
   );
 
+  const handleChange = useCallback(
+    (v: string | null) => {
+      if (!v) {
+        return;
+      }
+
+      addNode(v as AnyInvocationType);
+    },
+    [addNode]
+  );
+
   return (
     <Flex sx={{ gap: 2, alignItems: 'center' }}>
-      <IAIMantineMultiSelect
+      <IAIMantineSelect
         selectOnBlur={false}
         placeholder="Add Node"
-        value={[]}
+        value={null}
         data={data}
         maxDropdownHeight={400}
         nothingFound="No matching nodes"
         itemComponent={SelectItem}
-        filter={(value, selected, item: NodeTemplate) =>
+        filter={(value, item: NodeTemplate) =>
           item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
           item.value.toLowerCase().includes(value.toLowerCase().trim()) ||
           item.description.toLowerCase().includes(value.toLowerCase().trim())
         }
-        onChange={(v) => {
-          v[0] && addNode(v[0] as AnyInvocationType);
-        }}
+        onChange={handleChange}
         sx={{
           width: '18rem',
         }}