fix(ui): revert IAICustomSelect usage to IAISelect

There are some bugs with it that I cannot figure out related to `floating-ui` and `downshift`'s handling of refs.

Will need to revisit this component in the future.

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx

@@ -2,6 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import IAICustomSelect, {
   IAICustomSelectOption,
 } from 'common/components/IAICustomSelect';
+import IAISelect from 'common/components/IAISelect';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 import {
   CONTROLNET_MODELS,
@@ -9,45 +10,71 @@ import {
 } from 'features/controlNet/store/constants';
 import { controlNetModelChanged } from 'features/controlNet/store/controlNetSlice';
 import { map } from 'lodash-es';
-import { memo, useCallback } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 
 type ParamControlNetModelProps = {
   controlNetId: string;
   model: ControlNetModelName;
 };
 
-const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
+const DATA = map(CONTROLNET_MODELS, (m) => ({
+  key: m.label,
   value: m.type,
-  label: m.label,
-  tooltip: m.type,
 }));
 
+// const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
+//   value: m.type,
+//   label: m.label,
+//   tooltip: m.type,
+// }));
+
 const ParamControlNetModel = (props: ParamControlNetModelProps) => {
   const { controlNetId, model } = props;
   const dispatch = useAppDispatch();
   const isReady = useIsReadyToInvoke();
 
   const handleModelChanged = useCallback(
-    (val: string | null | undefined) => {
+    (e: ChangeEvent<HTMLSelectElement>) => {
       // TODO: do not cast
-      const model = val as ControlNetModelName;
+      const model = e.target.value as ControlNetModelName;
       dispatch(controlNetModelChanged({ controlNetId, model }));
     },
     [controlNetId, dispatch]
   );
 
+  // const handleModelChanged = useCallback(
+  //   (val: string | null | undefined) => {
+  //     // TODO: do not cast
+  //     const model = val as ControlNetModelName;
+  //     dispatch(controlNetModelChanged({ controlNetId, model }));
+  //   },
+  //   [controlNetId, dispatch]
+  // );
+
   return (
-    <IAICustomSelect
+    <IAISelect
       tooltip={model}
       tooltipProps={{ placement: 'top', hasArrow: true }}
-      data={DATA}
+      validValues={DATA}
       value={model}
       onChange={handleModelChanged}
       isDisabled={!isReady}
-      ellipsisPosition="start"
+      // ellipsisPosition="start"
-      withCheckIcon
+      // withCheckIcon
     />
   );
+  // return (
+  //   <IAICustomSelect
+  //     tooltip={model}
+  //     tooltipProps={{ placement: 'top', hasArrow: true }}
+  //     data={DATA}
+  //     value={model}
+  //     onChange={handleModelChanged}
+  //     isDisabled={!isReady}
+  //     ellipsisPosition="start"
+  //     withCheckIcon
+  //   />
+  // );
 };
 
 export default memo(ParamControlNetModel);

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -1,39 +1,47 @@
 import IAICustomSelect, {
   IAICustomSelectOption,
 } from 'common/components/IAICustomSelect';
-import { memo, useCallback } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 import {
   ControlNetProcessorNode,
   ControlNetProcessorType,
 } from '../../store/types';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { map } from 'lodash-es';
-import { isProcessingSelector } from 'features/system/store/systemSelectors';
 import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import IAISelect from 'common/components/IAISelect';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;
   processorNode: ControlNetProcessorNode;
 };
 
-const CONTROLNET_PROCESSOR_TYPES: IAICustomSelectOption[] = map(
+const CONTROLNET_PROCESSOR_TYPES = map(CONTROLNET_PROCESSORS, (p) => ({
-  CONTROLNET_PROCESSORS,
+  value: p.type,
-  (p) => ({
+  key: p.label,
-    value: p.type,
+})).sort((a, b) =>
-    label: p.label,
-    tooltip: p.description,
-  })
-).sort((a, b) =>
   // sort 'none' to the top
-  a.value === 'none'
+  a.value === 'none' ? -1 : b.value === 'none' ? 1 : a.key.localeCompare(b.key)
-    ? -1
-    : b.value === 'none'
-    ? 1
-    : a.label.localeCompare(b.label)
 );
 
+// const CONTROLNET_PROCESSOR_TYPES: IAICustomSelectOption[] = map(
+//   CONTROLNET_PROCESSORS,
+//   (p) => ({
+//     value: p.type,
+//     label: p.label,
+//     tooltip: p.description,
+//   })
+// ).sort((a, b) =>
+//   // sort 'none' to the top
+//   a.value === 'none'
+//     ? -1
+//     : b.value === 'none'
+//     ? 1
+//     : a.label.localeCompare(b.label)
+// );
+
 const ParamControlNetProcessorSelect = (
   props: ParamControlNetProcessorSelectProps
 ) => {
@@ -42,26 +50,46 @@ const ParamControlNetProcessorSelect = (
   const isReady = useIsReadyToInvoke();
 
   const handleProcessorTypeChanged = useCallback(
-    (v: string | null | undefined) => {
+    (e: ChangeEvent<HTMLSelectElement>) => {
       dispatch(
         controlNetProcessorTypeChanged({
           controlNetId,
-          processorType: v as ControlNetProcessorType,
+          processorType: e.target.value as ControlNetProcessorType,
         })
       );
     },
     [controlNetId, dispatch]
   );
+  // const handleProcessorTypeChanged = useCallback(
+  //   (v: string | null | undefined) => {
+  //     dispatch(
+  //       controlNetProcessorTypeChanged({
+  //         controlNetId,
+  //         processorType: v as ControlNetProcessorType,
+  //       })
+  //     );
+  //   },
+  //   [controlNetId, dispatch]
+  // );
+
   return (
-    <IAICustomSelect
+    <IAISelect
       label="Processor"
       value={processorNode.type ?? 'canny_image_processor'}
-      data={CONTROLNET_PROCESSOR_TYPES}
+      validValues={CONTROLNET_PROCESSOR_TYPES}
       onChange={handleProcessorTypeChanged}
-      withCheckIcon
-      isDisabled={!isReady}
     />
   );
+  // return (
+  //   <IAICustomSelect
+  //     label="Processor"
+  //     value={processorNode.type ?? 'canny_image_processor'}
+  //     data={CONTROLNET_PROCESSOR_TYPES}
+  //     onChange={handleProcessorTypeChanged}
+  //     withCheckIcon
+  //     isDisabled={!isReady}
+  //   />
+  // );
 };
 
 export default memo(ParamControlNetProcessorSelect);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx

@@ -3,10 +3,11 @@ import { Scheduler } from 'app/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICustomSelect from 'common/components/IAICustomSelect';
+import IAISelect from 'common/components/IAISelect';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setScheduler } from 'features/parameters/store/generationSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { memo, useCallback } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createSelector(
@@ -35,24 +36,39 @@ const ParamScheduler = () => {
   const { t } = useTranslation();
 
   const handleChange = useCallback(
-    (v: string | null | undefined) => {
+    (e: ChangeEvent<HTMLSelectElement>) => {
-      if (!v) {
+      dispatch(setScheduler(e.target.value as Scheduler));
-        return;
-      }
-      dispatch(setScheduler(v as Scheduler));
     },
     [dispatch]
   );
+  // const handleChange = useCallback(
+  //   (v: string | null | undefined) => {
+  //     if (!v) {
+  //       return;
+  //     }
+  //     dispatch(setScheduler(v as Scheduler));
+  //   },
+  //   [dispatch]
+  // );
 
   return (
-    <IAICustomSelect
+    <IAISelect
       label={t('parameters.scheduler')}
       value={scheduler}
-      data={allSchedulers}
+      validValues={allSchedulers}
       onChange={handleChange}
-      withCheckIcon
     />
   );
+
+  // return (
+  //   <IAICustomSelect
+  //     label={t('parameters.scheduler')}
+  //     value={scheduler}
+  //     data={allSchedulers}
+  //     onChange={handleChange}
+  //     withCheckIcon
+  //   />
+  // );
 };
 
 export default memo(ParamScheduler);

invokeai/frontend/web/src/features/system/components/ModelSelect.tsx

@@ -1,5 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { memo, useCallback } from 'react';
+import { ChangeEvent, memo, useCallback } from 'react';
 import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
@@ -11,6 +11,7 @@ import { generationSelector } from 'features/parameters/store/generationSelector
 import IAICustomSelect, {
   IAICustomSelectOption,
 } from 'common/components/IAICustomSelect';
+import IAISelect from 'common/components/IAISelect';
 
 const selector = createSelector(
   [(state: RootState) => state, generationSelector],
@@ -18,12 +19,18 @@ const selector = createSelector(
     const selectedModel = selectModelsById(state, generation.model);
 
     const modelData = selectModelsAll(state)
-      .map<IAICustomSelectOption>((m) => ({
+      .map((m) => ({
         value: m.name,
-        label: m.name,
+        key: m.name,
-        tooltip: m.description,
       }))
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort((a, b) => a.key.localeCompare(b.key));
+    // const modelData = selectModelsAll(state)
+    //   .map<IAICustomSelectOption>((m) => ({
+    //     value: m.name,
+    //     label: m.name,
+    //     tooltip: m.description,
+    //   }))
+    //   .sort((a, b) => a.label.localeCompare(b.label));
     return {
       selectedModel,
       modelData,
@@ -41,26 +48,43 @@ const ModelSelect = () => {
   const { t } = useTranslation();
   const { selectedModel, modelData } = useAppSelector(selector);
   const handleChangeModel = useCallback(
-    (v: string | null | undefined) => {
+    (e: ChangeEvent<HTMLSelectElement>) => {
-      if (!v) {
+      dispatch(modelSelected(e.target.value));
-        return;
-      }
-      dispatch(modelSelected(v));
     },
     [dispatch]
   );
+  // const handleChangeModel = useCallback(
+  //   (v: string | null | undefined) => {
+  //     if (!v) {
+  //       return;
+  //     }
+  //     dispatch(modelSelected(v));
+  //   },
+  //   [dispatch]
+  // );
 
   return (
-    <IAICustomSelect
+    <IAISelect
       label={t('modelManager.model')}
       tooltip={selectedModel?.description}
-      data={modelData}
+      validValues={modelData}
       value={selectedModel?.name ?? ''}
       onChange={handleChangeModel}
-      withCheckIcon={true}
       tooltipProps={{ placement: 'top', hasArrow: true }}
     />
   );
+
+  // return (
+  //   <IAICustomSelect
+  //     label={t('modelManager.model')}
+  //     tooltip={selectedModel?.description}
+  //     data={modelData}
+  //     value={selectedModel?.name ?? ''}
+  //     onChange={handleChangeModel}
+  //     withCheckIcon={true}
+  //     tooltipProps={{ placement: 'top', hasArrow: true }}
+  //   />
+  // );
 };
 
 export default memo(ModelSelect);