select: proper CSR fix

Author: thejackshelton

packages/kit-headless/src/components/select/hidden-select.tsx

@@ -51,8 +51,7 @@ export const HiddenNativeSelect = component$(
               onFocus$={() => context.triggerRef.value?.focus()}
               ref={(element: HTMLSelectElement) => {
                 nativeSelectRef.value = element;
-
-                // @ts-expect-error ref
+                // @ts-expect-error modular forms ref function
                 ref?.(element);
               }}
               multiple={context.multiple}

packages/kit-headless/src/components/select/select-popover.tsx

@@ -11,25 +11,30 @@ import { PopoverPanel } from '../popover/popover-panel';
 
 import SelectContextId from './select-context';
 import { PopoverRoot } from '../popover/popover-root';
+import { isServer } from '@builder.io/qwik/build';
 
 export const SelectPopover = component$<PropsOf<typeof PopoverRoot>>((props) => {
   const context = useContext(SelectContextId);
   const { showPopover, hidePopover } = usePopover(context.localId);
-  const initialLoadSig = useSignal<boolean>(true);
 
   const { floating, flip, hover, gutter, ...rest } = props;
+  const initialLoadSig = useSignal<boolean>(true);
 
   useTask$(async ({ track }) => {
     track(() => context.isListboxOpenSig.value);
 
+    if (isServer) return;
+
     if (!initialLoadSig.value) {
       if (context.isListboxOpenSig.value) {
         await showPopover();
       } else {
         await hidePopover();
       }
     }
+  });
 
+  useTask$(() => {
     initialLoadSig.value = false;
   });
 

packages/kit-headless/src/components/select/select-root.tsx

@@ -10,7 +10,6 @@ import {
   useId,
   useComputed$,
 } from '@builder.io/qwik';
-import { isBrowser, isServer } from '@builder.io/qwik/build';
 import SelectContextId, { type SelectContext } from './select-context';
 import { useSelect } from './use-select';
 
@@ -154,7 +153,6 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
     const highlightedIndexSig = useSignal<number | null>(givenValuePropIndex ?? null);
 
     const isListboxOpenSig = useSignal<boolean>(false);
-    const initialLoadSig = useSignal<boolean>(true);
     const scrollOptions = givenScrollOptions ?? {
       behavior: 'instant',
       block: 'nearest',
@@ -187,20 +185,17 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
     const { getActiveDescendant$, extractedStrOrArrFromMap$, selectionManager$ } =
       useSelect();
 
-    useTask$(function reactiveUserValue({ track }) {
+    useTask$(async function reactiveUserValue({ track }) {
       const bindValueSig = props['bind:value'];
       if (!bindValueSig) return;
       track(() => bindValueSig.value);
 
       for (const [index, item] of itemsMapSig.value) {
         if (bindValueSig.value.includes(item.value)) {
-          selectionManager$(index, 'add');
+          await selectionManager$(index, 'add');
 
-          if (initialLoadSig.value) {
-            // for both SSR and CSR, we need to set the initial index
-            context.highlightedIndexSig.value = index;
-          }
-          initialLoadSig.value = false;
+          // for both SSR and CSR, we need to set the initial index
+          context.highlightedIndexSig.value = index;
         }
       }
     });
@@ -215,9 +210,7 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
 
     useTask$(function onOpenChangeTask({ track }) {
       track(() => isListboxOpenSig.value);
-      if (isBrowser) {
-        onOpenChange$?.(isListboxOpenSig.value);
-      }
+      onOpenChange$?.(isListboxOpenSig.value);
     });
 
     const activeDescendantSig = useComputed$(() => {
@@ -233,8 +226,6 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
       const bindDisplayTextSig = props['bind:displayText'];
       track(() => selectedIndexSetSig.value);
 
-      if (isServer) return;
-
       const currValue = await extractedStrOrArrFromMap$('value');
       const currDisplayValue = await extractedStrOrArrFromMap$('displayValue');
 

packages/kit-headless/src/components/select/use-select.tsx

@@ -124,20 +124,21 @@ export function useTypeahead() {
   const inputStrSig = useSignal('');
   const indexDiffSig = useSignal<number | undefined>(undefined);
   const prevTimeoutSig = useSignal<undefined | NodeJS.Timeout>(undefined);
+  const { selectionManager$ } = useSelect();
 
   const firstCharItemSig = useComputed$(() => {
     return Array.from(context.itemsMapSig.value.values()).map((item) =>
       item.displayValue?.slice(0, 1).toLowerCase(),
     );
   });
 
-  const typeahead$ = $((key: string): void => {
+  const typeahead$ = $(async (key: string): Promise<void> => {
     inputStrSig.value += key;
     if (key.length > 1) {
       return;
     }
 
-    const firstCharOnly$ = $(() => {
+    const firstCharOnly$ = $(async () => {
       // First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
       const singleInputChar = key.toLowerCase();
 
@@ -152,7 +153,7 @@ export function useTypeahead() {
         context.highlightedIndexSig.value = firstCharIndex;
 
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSetSig.value = new Set([firstCharIndex]);
+          await selectionManager$(firstCharIndex, 'add');
         }
 
         return;
@@ -175,7 +176,7 @@ export function useTypeahead() {
 
           context.highlightedIndexSig.value = nextIndex;
           if (!context.isListboxOpenSig.value) {
-            context.selectedIndexSetSig.value = new Set([nextIndex]);
+            await selectionManager$(nextIndex, 'add');
           }
           indexDiffSig.value = nextIndex + 1;
           return;
@@ -184,20 +185,20 @@ export function useTypeahead() {
         indexDiffSig.value = undefined;
         context.highlightedIndexSig.value = firstCharIndex;
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSetSig.value = new Set([firstCharIndex]);
+          await selectionManager$(firstCharIndex, 'add');
         }
         return;
       }
       indexDiffSig.value = firstCharIndex + 1;
       context.highlightedIndexSig.value = firstCharIndex;
       if (!context.isListboxOpenSig.value) {
-        context.selectedIndexSetSig.value = new Set([firstCharIndex]);
+        await selectionManager$(firstCharIndex, 'add');
       }
 
       return;
     });
 
-    const multipleChars$ = $(() => {
+    const multipleChars$ = $(async () => {
       // If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
       clearTimeout(prevTimeoutSig.value);
       prevTimeoutSig.value = setTimeout(() => {
@@ -219,7 +220,7 @@ export function useTypeahead() {
       if (firstPossibleOpt !== -1) {
         context.highlightedIndexSig.value = firstPossibleOpt;
         if (!context.isListboxOpenSig.value) {
-          context.selectedIndexSetSig.value = new Set([firstPossibleOpt]);
+          await selectionManager$(firstPossibleOpt, 'add');
         }
         return;
       }