fix(ui): use the old combobox component for dropdowns

Closes #6011

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -1,24 +1,36 @@
-import { CustomSelect, FormControl } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useModelCustomSelect } from 'common/hooks/useModelCustomSelect';
+import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterModel } from 'features/controlAdapters/hooks/useControlAdapterModel';
 import { useControlAdapterModels } from 'features/controlAdapters/hooks/useControlAdapterModels';
 import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
 import { controlAdapterModelChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { memo, useCallback, useMemo } from 'react';
-import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import { useTranslation } from 'react-i18next';
+import type {
+  AnyModelConfig,
+  ControlNetModelConfig,
+  IPAdapterModelConfig,
+  T2IAdapterModelConfig,
+} from 'services/api/types';
 
 type ParamControlAdapterModelProps = {
   id: string;
 };
 
+const selectMainModel = createMemoizedSelector(selectGenerationSlice, (generation) => generation.model);
+
 const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const controlAdapterType = useControlAdapterType(id);
   const { modelConfig } = useControlAdapterModel(id);
   const dispatch = useAppDispatch();
   const currentBaseModel = useAppSelector((s) => s.generation.model?.base);
+  const mainModel = useAppSelector(selectMainModel);
+  const { t } = useTranslation();
 
   const [modelConfigs, { isLoading }] = useControlAdapterModels(controlAdapterType);
 
@@ -42,24 +54,35 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
     [controlAdapterType, modelConfig]
   );
 
-  const { items, selectedItem, onChange, placeholder } = useModelCustomSelect({
+  const getIsDisabled = useCallback(
+    (model: AnyModelConfig): boolean => {
+      const isCompatible = currentBaseModel === model.base;
+      const hasMainModel = Boolean(currentBaseModel);
+      return !hasMainModel || !isCompatible;
+    },
+    [currentBaseModel]
+  );
+
+  const { options, value, onChange, noOptionsMessage } = useGroupedModelCombobox({
     modelConfigs,
-    isLoading,
-    selectedModel,
     onChange: _onChange,
-    modelFilter: (model) => model.base === currentBaseModel,
+    selectedModel,
+    getIsDisabled,
+    isLoading,
   });
 
   return (
-    <FormControl isDisabled={!items.length || !isEnabled} isInvalid={!selectedItem || !items.length}>
-      <CustomSelect
-        key={items.length}
-        selectedItem={selectedItem}
-        placeholder={placeholder}
-        items={items}
-        onChange={onChange}
-      />
-    </FormControl>
+    <Tooltip label={value?.description}>
+      <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}>
+        <Combobox
+          options={options}
+          placeholder={t('controlnet.selectModel')}
+          value={value}
+          onChange={onChange}
+          noOptionsMessage={noOptionsMessage}
+        />
+      </FormControl>
+    </Tooltip>
   );
 };
 

invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx

@@ -1,12 +1,12 @@
-import { CustomSelect, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui-library';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { useModelCustomSelect } from 'common/hooks/useModelCustomSelect';
+import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { zModelIdentifierField } from 'features/nodes/types/common';
 import { modelSelected } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMainModels } from 'services/api/hooks/modelsByType';
 import type { MainModelConfig } from 'services/api/types';
@@ -18,7 +18,12 @@ const ParamMainModelSelect = () => {
   const { t } = useTranslation();
   const selectedModel = useAppSelector(selectModel);
   const [modelConfigs, { isLoading }] = useMainModels();
-
+  const tooltipLabel = useMemo(() => {
+    if (!modelConfigs.length || !selectedModel) {
+      return;
+    }
+    return modelConfigs.find((m) => m.key === selectedModel?.key)?.description;
+  }, [modelConfigs, selectedModel]);
   const _onChange = useCallback(
     (model: MainModelConfig | null) => {
       if (!model) {
@@ -33,26 +38,28 @@ const ParamMainModelSelect = () => {
     [dispatch]
   );
 
-  const { items, selectedItem, onChange, placeholder } = useModelCustomSelect({
+  const { options, value, onChange, placeholder, noOptionsMessage } = useGroupedModelCombobox({
     modelConfigs,
-    isLoading,
     selectedModel,
     onChange: _onChange,
+    isLoading,
   });
 
   return (
-    <FormControl isDisabled={!items.length} isInvalid={!selectedItem || !items.length}>
-      <InformationalPopover feature="paramModel">
-        <FormLabel>{t('modelManager.model')}</FormLabel>
-      </InformationalPopover>
-      <CustomSelect
-        key={items.length}
-        selectedItem={selectedItem}
-        placeholder={placeholder}
-        items={items}
-        onChange={onChange}
-      />
-    </FormControl>
+    <Tooltip label={tooltipLabel}>
+      <FormControl isDisabled={!modelConfigs.length} isInvalid={!value || !modelConfigs.length}>
+        <InformationalPopover feature="paramModel">
+          <FormLabel>{t('modelManager.model')}</FormLabel>
+        </InformationalPopover>
+        <Combobox
+          value={value}
+          placeholder={placeholder}
+          options={options}
+          onChange={onChange}
+          noOptionsMessage={noOptionsMessage}
+        />
+      </FormControl>
+    </Tooltip>
   );
 };