improved initial load

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx

@@ -5,23 +5,23 @@ import { LuCheck, LuX } from '@qwikest/icons/lucide';
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const display = useSignal<string[]>(['Jim']);
-  const selected = useSignal<string[]>(['Jim']);
+  const display = useSignal<string[]>([]);
+  const selected = useSignal<string[]>([]);
 
   return (
     <Select.Root multiple bind:displayText={display} bind:value={selected} class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
         <Select.DisplayText>
-          {display.value.map((opt) => (
-            <span class="select-pill" key={opt}>
-              {opt}
+          {display.value.map((item) => (
+            <span class="select-pill" key={item}>
+              {item}
               <span
-                onClick$={() =>
-                  (selected.value = selected.value?.filter(
-                    (selectedOpt) => selectedOpt !== opt,
-                  ))
-                }
+                onClick$={() => {
+                  selected.value = selected.value?.filter(
+                    (selectedItem) => selectedItem !== item,
+                  );
+                }}
               >
                 <LuX aria-hidden="true" />
               </span>

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

@@ -132,23 +132,6 @@ export const SelectRoot: Component<SelectProps & InlineCompProps> = (
     }
   }
 
-  // console warning if a consumer's passed in value does not match an option
-  // let valueMatch = true;
-  // if (props.value !== undefined) {
-  //   for (const item of itemsMap.values()) {
-  //     if (!props.value.includes(item.value)) {
-  //       console.log(props.value.includes(item.value));
-  //       valueMatch = false;
-  //     }
-  //   }
-
-  //   if (!valueMatch) {
-  //     throw new Error(
-  //       `Qwik UI: a provided option value "${props.value}" does not match any of the option values in the Select.`,
-  //     );
-  //   }
-  // }
-
   return (
     <SelectImpl
       {...rest}

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

@@ -160,6 +160,8 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
 
     const currDisplayValueSig = useSignal<string | string[]>();
 
+    const initialLoadSig = useSignal<boolean>(true);
+
     const context: SelectContext = {
       itemsMapSig,
       currDisplayValueSig,
@@ -194,8 +196,10 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
         if (bindValueSig.value.includes(item.value)) {
           await selectionManager$(index, 'add');
 
-          // for both SSR and CSR, we need to set the initial index
-          context.highlightedIndexSig.value = index;
+          if (initialLoadSig.value) {
+            // for both SSR and CSR, we need to set the initial index
+            context.highlightedIndexSig.value = index;
+          }
         }
       }
     });
@@ -210,7 +214,10 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
 
     useTask$(function onOpenChangeTask({ track }) {
       track(() => isListboxOpenSig.value);
-      onOpenChange$?.(isListboxOpenSig.value);
+
+      if (!initialLoadSig.value) {
+        onOpenChange$?.(isListboxOpenSig.value);
+      }
     });
 
     const activeDescendantSig = useComputed$(() => {
@@ -227,7 +234,6 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
       track(() => selectedIndexSetSig.value);
 
       const currValue = await extractedStrOrArrFromMap$('value');
-      const currDisplayValue = await extractedStrOrArrFromMap$('displayValue');
 
       if (onChange$ && selectedIndexSetSig.value.size > 0) {
         await onChange$(currValue);
@@ -240,9 +246,12 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
 
         if (currUserSigValues !== newUserSigValues) {
           bindValueSig.value = currValue;
+          console.log('BINDVALUE SIG', bindValueSig.value);
         }
       }
 
+      const currDisplayValue = await extractedStrOrArrFromMap$('displayValue');
+
       // sync the user's given signal for the display value
       if (bindDisplayTextSig && currDisplayValue) {
         if (typeof currDisplayValue === 'string') {
@@ -253,6 +262,10 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
       }
     });
 
+    useTask$(() => {
+      initialLoadSig.value = false;
+    });
+
     return (
       <div
         role="combobox"