fix: highlight jumping

qwikifiers · Sep 22, 2024 · 6a8efd0 · 6a8efd0
1 parent 4ba2d9d
commit 6a8efd0
Show file tree

Hide file tree

Showing 2 changed files with 25 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
@@ -15,7 +15,7 @@ import { useCombinedRef } from '../../hooks/combined-refs';
 type HComboboxInputProps = PropsOf<'input'>;
 
 export const HComboboxInput = component$(
-  ({ 'bind:value': inputValueSig, ...props }: HComboboxInputProps) => {
+  ({ 'bind:value': givenInputValueSig, ...props }: HComboboxInputProps) => {
     const context = useContext(comboboxContextId);
     const contextRefOpts = { context, givenContextRef: context.inputRef };
     const inputRef = useCombinedRef(props.ref, contextRefOpts);
@@ -143,8 +143,8 @@ export const HComboboxInput = component$(
       isInputResetSig.value = false;
 
       // bind:value on the input
-      if (inputValueSig) {
-        inputValueSig.value = el.value;
+      if (givenInputValueSig) {
+        givenInputValueSig.value = el.value;
         context.inputValueSig.value = el.value;
       }
     });
@@ -180,9 +180,7 @@ export const HComboboxInput = component$(
 
         if (isSelected) {
           initialValue.push(item.displayValue);
-          if (highlightedIndexSig.value === -1) {
-            highlightedIndexSig.value = index;
-          }
+          highlightedIndexSig.value = index;
           // end the loop when we've found our selected value in single mode
           if (!multiple) break;
         }
@@ -191,21 +189,14 @@ export const HComboboxInput = component$(
       initialValueSig.value = multiple ? initialValue : initialValue[0] || '';
     });
 
-    const computedInputValueSig = useComputed$(() => {
-      if (initialValueSig.value) {
-        return initialValueSig.value;
-      } else {
-        if (inputValueSig?.value) {
-          return inputValueSig.value;
-        }
-        return '';
-      }
-    });
+    const inputValueSig = useComputed$(
+      () => initialValueSig.value ?? givenInputValueSig?.value ?? '',
+    );
 
     return (
       <input
         role="combobox"
-        value={computedInputValueSig.value}
+        value={inputValueSig.value}
         id={inputId}
         onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
         onKeyUp$={[context.removeOnBackspace ? handleKeyUp$ : undefined, props.onKeyUp$]}

diff --git a/packages/kit-headless/src/components/combobox/combobox-root.tsx b/packages/kit-headless/src/components/combobox/combobox-root.tsx
@@ -258,6 +258,23 @@ export const HComboboxRootImpl = component$<
     if (!initialLoadSig.value && selectedValuesSig.value.length > 0) {
       await onChange$?.(selectedValuesSig.value);
     }
+
+    const selectedValue = Array.isArray(selectedValuesSig.value)
+      ? selectedValuesSig.value[selectedValuesSig.value.length - 1]
+      : selectedValuesSig.value;
+
+    for (const [index, item] of itemsMapSig.value.entries()) {
+      if (item.value === selectedValue) {
+        /* avoid "highlight jumping" on multiple selections */
+        if (context.isListboxOpenSig.value === false) {
+          context.highlightedIndexSig.value = index;
+        }
+
+        if (!context.inputRef.value) return;
+        context.inputRef.value.value = item.displayValue;
+        break;
+      }
+    }
   });
 
   useTask$(() => {