From 70ffd6b03f9b6b4131765adab029193d9a7fb0b3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 14 Jun 2023 13:19:51 +1000
Subject: [PATCH] fix(ui): fix controlnet selects data types

---
 .../parameters/ParamControlNetModel.tsx       |  8 ++++++--
 .../ParamControlNetProcessorSelect.tsx        | 19 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
index e17eb6a54b..7a6def717a 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
@@ -1,6 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSelect, {
+  IAISelectDataType,
+} from 'common/components/IAIMantineSelect';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import {
   CONTROLNET_MODELS,
@@ -17,7 +19,7 @@ type ParamControlNetModelProps = {
 };
 
 const selector = createSelector(configSelector, (config) => {
-  return map(CONTROLNET_MODELS, (m) => ({
+  const controlNetModels: IAISelectDataType[] = map(CONTROLNET_MODELS, (m) => ({
     label: m.label,
     value: m.type,
   })).filter(
@@ -26,6 +28,8 @@ const selector = createSelector(configSelector, (config) => {
         d.value as ControlNetModelName
       )
   );
+
+  return controlNetModels;
 });
 
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
index 328bd56673..9f333e1c33 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
@@ -1,6 +1,8 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 
-import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import IAIMantineSelect, {
+  IAISelectDataType,
+} from 'common/components/IAIMantineSelect';
 import { map } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
@@ -22,17 +24,20 @@ type ParamControlNetProcessorSelectProps = {
 const selector = createSelector(
   configSelector,
   (config) => {
-    return map(CONTROLNET_PROCESSORS, (p) => ({
-      value: p.type,
-      key: p.label,
-    }))
+    const controlNetProcessors: IAISelectDataType[] = map(
+      CONTROLNET_PROCESSORS,
+      (p) => ({
+        value: p.type,
+        label: p.label,
+      })
+    )
       .sort((a, b) =>
         // sort 'none' to the top
         a.value === 'none'
           ? -1
           : b.value === 'none'
           ? 1
-          : a.key.localeCompare(b.key)
+          : a.label.localeCompare(b.label)
       )
       .filter(
         (d) =>
@@ -40,6 +45,8 @@ const selector = createSelector(
             d.value as ControlNetProcessorType
           )
       );
+
+    return controlNetProcessors;
   },
   defaultSelectorOptions
 );