fix(ui): keyboard nav on picker

Author: psychedelicious

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

@@ -14,8 +14,9 @@ import { useStore } from '@nanostores/react';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { typedMemo } from 'common/util/typedMemo';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
-import type { ReadableAtom, WritableAtom } from 'nanostores';
+import type { AnyStore, ReadableAtom, Task, WritableAtom } from 'nanostores';
 import { atom, computed } from 'nanostores';
+import type { StoreValues } from 'nanostores/computed';
 import type { ChangeEvent, PropsWithChildren, RefObject } from 'react';
 import React, {
   createContext,
@@ -614,20 +615,41 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
 Picker.displayName = 'Picker';
 
 const PickerSyncer = typedMemo(<T extends object>() => {
-  const { optionsOrGroups, $searchTerm, $activeOptionId, $filteredOptions, searchable, isMatch, getOptionId } =
-    usePickerContext();
+  const {
+    optionsOrGroups,
+    $searchTerm,
+    $activeOptionId,
+    $groupStatusMap,
+    $areAllGroupsDisabled,
+    $filteredOptions,
+    searchable,
+    isMatch,
+    getOptionId,
+  } = usePickerContext<T>();
   const searchTerm = useStore($searchTerm);
+  const groupStatusMap = useStore($groupStatusMap);
+  const areAllGroupsDisabled = useStore($areAllGroupsDisabled);
   const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
 
   useEffect(() => {
     if (!debouncedSearchTerm || !searchable) {
-      $filteredOptions.set(optionsOrGroups);
-      $activeOptionId.set(getFirstOptionId(optionsOrGroups, getOptionId));
+      const filtered = optionsOrGroups.filter((item) => {
+        if (isGroup(item)) {
+          return groupStatusMap[item.id] || areAllGroupsDisabled;
+        } else {
+          return true;
+        }
+      });
+      $filteredOptions.set(filtered as T[] | Group<T>[]);
+      $activeOptionId.set(getFirstOptionId(filtered as T[] | Group<T>[], getOptionId));
     } else {
       const lowercasedSearchTerm = debouncedSearchTerm.toLowerCase();
       const filtered = [];
       for (const item of optionsOrGroups) {
         if (isGroup(item)) {
+          if (!groupStatusMap[item.id] && !areAllGroupsDisabled) {
+            continue;
+          }
           const filteredItems = item.options.filter((item) => isMatch(item, lowercasedSearchTerm));
           if (filteredItems.length > 0) {
             filtered.push({ ...item, options: filteredItems });
@@ -641,7 +663,17 @@ const PickerSyncer = typedMemo(<T extends object>() => {
       $filteredOptions.set(filtered as T[] | Group<T>[]);
       $activeOptionId.set(getFirstOptionId(filtered as T[] | Group<T>[], getOptionId));
     }
-  }, [debouncedSearchTerm, $activeOptionId, getOptionId, isMatch, $filteredOptions, searchable, optionsOrGroups]);
+  }, [
+    debouncedSearchTerm,
+    $activeOptionId,
+    getOptionId,
+    isMatch,
+    $filteredOptions,
+    searchable,
+    optionsOrGroups,
+    groupStatusMap,
+    areAllGroupsDisabled,
+  ]);
 
   return null;
 });