feat(ui): add picker searchable prop

Author: psychedelicious

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -194,6 +194,10 @@ type PickerProps<T extends object> = {
    * as a text element with appropriate styling. If a React node is provided, it will be rendered as is.
    */
   noMatchesFallback?: React.ReactNode;
+  /**
+   * Whether the picker should be searchable. If true, renders a search input.
+   */
+  searchable?: boolean;
 };
 
 type PickerContextState<T extends object> = {
@@ -478,6 +482,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
     noOptionsFallback,
     OptionComponent = DefaultOptionComponent,
     NextToSearchBar,
+    searchable,
   } = props;
   const [$activeOptionId] = useState(() => {
     const initialValue = getFirstOptionId(rawOptions, getOptionId);
@@ -546,7 +551,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   );
 
   useEffect(() => {
-    if (!debouncedSearchTerm) {
+    if (!debouncedSearchTerm || !searchable) {
       $filteredOptions.set(options);
       $activeOptionId.set(getFirstOptionId(options, getOptionId));
     } else {
@@ -567,7 +572,16 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
       $filteredOptions.set(filtered as T[] | Group<T>[]);
       $activeOptionId.set(getFirstOptionId(filtered as T[] | Group<T>[], getOptionId));
     }
-  }, [debouncedSearchTerm, $activeOptionId, props.options, options, getOptionId, isMatch, $filteredOptions]);
+  }, [
+    debouncedSearchTerm,
+    $activeOptionId,
+    props.options,
+    options,
+    getOptionId,
+    isMatch,
+    $filteredOptions,
+    searchable,
+  ]);
 
   const onSelectById = useCallback(
     (id: string) => {
@@ -641,7 +655,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   return (
     <PickerContext.Provider value={ctx}>
       <PickerContainer>
-        <PickerSearchBar value={searchTerm} onChange={onChangeSearchTerm} isDisabled={!hasOptions} />
+        {searchable && <PickerSearchBar value={searchTerm} onChange={onChangeSearchTerm} isDisabled={!hasOptions} />}
         <Flex tabIndex={-1} w="full" flexGrow={1}>
           {!hasOptions && <NoOptionsFallback />}
           {hasOptions && !hasFilteredOptions && <NoMatchesFallback />}

invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx

@@ -223,6 +223,7 @@ export const ModelPicker = typedMemo(
                 noMatchesFallback={t('modelManager.noMatchingModels')}
                 NextToSearchBar={<NavigateToModelManagerButton />}
                 getIsDisabled={getIsDisabled}
+                searchable
               />
             </PopoverBody>
           </PopoverContent>