From 5fe674e22337613f6b94fdc1b6ea151244763b49 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Mon, 12 Jun 2023 21:25:37 +1200
Subject: [PATCH] feat: Standardize IAIMantineSelect Component

---
 .../web/src/app/components/ThemeLocaleProvider.tsx    |  2 +-
 .../web/src/common/components/IAIMantineSelect.tsx    | 11 +++++++++++
 .../components/Parameters/Core/ParamScheduler.tsx     |  5 ++---
 .../src/features/system/components/ModelSelect.tsx    |  5 ++---
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx

diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
index 966e110019..82065d83e3 100644
--- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
+++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
@@ -53,7 +53,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   }, [direction]);
 
   return (
-    <MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme}>
+    <MantineProvider withGlobalStyles theme={mantineTheme}>
       <ChakraProvider theme={theme} colorModeManager={manager}>
         {children}
       </ChakraProvider>
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
new file mode 100644
index 0000000000..8f25e4b197
--- /dev/null
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -0,0 +1,11 @@
+import { Select, SelectProps } from '@mantine/core';
+import { memo } from 'react';
+
+type IAISelectProps = SelectProps;
+
+const IAIMantineSelect = (props: IAISelectProps) => {
+  const { searchable = true, ...rest } = props;
+  return <Select searchable={searchable} {...rest} />;
+};
+
+export default memo(IAIMantineSelect);
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
index f2c1f62a33..66d712209d 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx
@@ -1,8 +1,8 @@
-import { Select } from '@mantine/core';
 import { createSelector } from '@reduxjs/toolkit';
 import { Scheduler } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
@@ -51,12 +51,11 @@ const ParamScheduler = () => {
   // );
 
   return (
-    <Select
+    <IAIMantineSelect
       label={t('parameters.scheduler')}
       value={scheduler}
       validValues={allSchedulers}
       onChange={handleChange}
-      searchable
     />
   );
 
diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
index cedc0d48f3..69407b6e61 100644
--- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
@@ -3,10 +3,10 @@ import { isEqual } from 'lodash-es';
 import { ChangeEvent, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Select } from '@mantine/core';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAICustomSelectOption } from 'common/components/IAICustomSelect';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { modelSelected } from 'features/parameters/store/generationSlice';
 import { selectModelsAll, selectModelsById } from '../store/modelSlice';
@@ -62,12 +62,11 @@ const ModelSelect = () => {
   // );
 
   return (
-    <Select
+    <IAIMantineSelect
       label={t('modelManager.model')}
       value={selectedModel?.name ?? ''}
       placeholder="Pick one"
       data={modelData}
-      searchable
       onChange={handleChangeModel}
     />
   );