fix: last filtered item now gets highlighted on down key

qwikifiers · Sep 22, 2024 · f55d297 · f55d297
1 parent c9969d1
commit f55d297
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/packages/kit-headless/src/components/combobox/combobox-input.tsx b/packages/kit-headless/src/components/combobox/combobox-input.tsx
@@ -65,9 +65,12 @@ export const HComboboxInput = component$(
             context.isListboxOpenSig.value &&
             context.highlightedIndexSig.value !== null
           ) {
+            console.log('BEFORE: ', context.highlightedIndexSig.value);
+
             context.highlightedIndexSig.value = await getNextEnabledItemIndex$(
               context.highlightedIndexSig.value,
             );
+            console.log(context.highlightedIndexSig.value);
           } else {
             context.isListboxOpenSig.value = true;
           }

diff --git a/packages/kit-headless/src/components/combobox/use-combobox.tsx b/packages/kit-headless/src/components/combobox/use-combobox.tsx
@@ -88,25 +88,24 @@ export function useCombobox() {
 
   const getNextEnabledItemIndex$ = $((index: number) => {
     const len = context.itemsMapSig.value.size;
-    if (len === 1) {
-      return context.disabledIndexSetSig.value.has(0) ? -1 : 0;
-    }
-
-    let offset = 1;
-    if (!context.loop && index + 1 >= len) {
-      return index;
-    }
-    while (offset < len) {
-      const nextIndex = (index + offset) % len;
-      if (!context.disabledIndexSetSig.value.has(nextIndex)) {
-        return nextIndex;
-      }
-      offset++;
-      if (!context.loop && index + offset >= len) {
-        break;
+    if (len === 0) return -1;
+
+    const findNextEnabled = (start: number) => {
+      for (let i = 0; i < len; i++) {
+        const nextIndex = (start + i) % len;
+        if (!context.disabledIndexSetSig.value.has(nextIndex)) {
+          return nextIndex;
+        }
       }
+      return -1;
+    };
+
+    if (index === -1 || len === 1) {
+      return findNextEnabled(0);
     }
-    return index;
+
+    const nextIndex = findNextEnabled(index + 1);
+    return context.loop || nextIndex > index ? nextIndex : index;
   });
 
   const getPrevEnabledItemIndex$ = $((index: number) => {