tests passing with map and set

Author: thejackshelton

packages/kit-headless/src/components/select/select-display-text.tsx

@@ -7,7 +7,6 @@ import {
 } from '@builder.io/qwik';
 
 import SelectContextId from './select-context';
-import { useSelect } from './use-select';
 
 type SelectValueProps = PropsOf<'span'> & {
   /**
@@ -21,20 +20,18 @@ export const SelectDisplayText = component$((props: SelectValueProps) => {
   const context = useContext(SelectContextId);
   const valueId = `${context.localId}-value`;
 
-  const { extractedStrOrArrFromMap$ } = useSelect();
-
   const displayStrSig = useComputed$(async () => {
     if (context.multiple) {
       // for more customization when multiple is true
       return <Slot />;
     }
 
-    const currDisplayValue = await extractedStrOrArrFromMap$('displayValue');
-
-    if (currDisplayValue.length > 0) {
-      return currDisplayValue;
-    } else {
+    if (context.selectedIndexSetSig.value.size === 0) {
       return placeholder;
+    } else {
+      return context.multiple
+        ? context.currDisplayValueSig.value
+        : context.currDisplayValueSig.value?.[0] ?? placeholder;
     }
   });
 

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

@@ -184,8 +184,7 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
 
     useContextProvider(SelectContextId, context);
 
-    const { getActiveDescendant$, extractedStrOrArrFromMap$, selectionManager$ } =
-      useSelect();
+    const { getActiveDescendant$, selectionManager$ } = useSelect();
 
     useTask$(async function reactiveUserValue({ track }) {
       const bindValueSig = props['bind:value'];
@@ -200,6 +199,8 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
             // for both SSR and CSR, we need to set the initial index
             context.highlightedIndexSig.value = index;
           }
+        } else {
+          await selectionManager$(index, 'remove');
         }
       }
     });
@@ -233,32 +234,39 @@ export const SelectImpl = component$<SelectProps<boolean> & InternalSelectProps>
       const bindDisplayTextSig = props['bind:displayText'];
       track(() => selectedIndexSetSig.value);
 
-      const currValue = await extractedStrOrArrFromMap$('value');
+      const values = [];
+      const displayValues = [];
+
+      for (const index of context.selectedIndexSetSig.value) {
+        const item = context.itemsMapSig.value.get(index);
+
+        if (item) {
+          values.push(item.value);
+          displayValues.push(item.displayValue);
+        }
+      }
 
       if (onChange$ && selectedIndexSetSig.value.size > 0) {
-        await onChange$(currValue);
+        await onChange$(context.multiple ? values : values[0]);
       }
 
       // sync the user's given signal when an option is selected
       if (bindValueSig && bindValueSig.value) {
         const currUserSigValues = JSON.stringify(bindValueSig.value);
-        const newUserSigValues = JSON.stringify(currValue);
+        const newUserSigValues = JSON.stringify(values);
 
         if (currUserSigValues !== newUserSigValues) {
-          bindValueSig.value = currValue;
-          console.log('BINDVALUE SIG', bindValueSig.value);
+          bindValueSig.value = values;
         }
       }
 
-      const currDisplayValue = await extractedStrOrArrFromMap$('displayValue');
+      context.currDisplayValueSig.value = displayValues;
 
       // sync the user's given signal for the display value
-      if (bindDisplayTextSig && currDisplayValue) {
-        if (typeof currDisplayValue === 'string') {
-          bindDisplayTextSig.value = [currDisplayValue];
-        } else {
-          bindDisplayTextSig.value = currDisplayValue;
-        }
+      if (bindDisplayTextSig && context.currDisplayValueSig.value) {
+        bindDisplayTextSig.value = context.multiple
+          ? context.currDisplayValueSig.value
+          : context.currDisplayValueSig.value[0];
       }
     });
 

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

@@ -8,41 +8,50 @@ import SelectContextId from './select-context';
 export function useSelect() {
   const context = useContext(SelectContextId);
 
-  const selectionManager$ = $(async (index: number | null, action: 'add' | 'toggle') => {
-    if (index === null) return;
-
-    // Check if the current index is disabled, and if so, find the next enabled index
-    const currItem = context.itemsMapSig.value.get(index);
-
-    const enabledIndex =
-      currItem && currItem.disabled ? await getNextEnabledItemIndex$(index) : index;
-
-    if (action === 'add') {
-      if (context.multiple) {
-        context.selectedIndexSetSig.value = new Set([
-          ...context.selectedIndexSetSig.value,
-          index,
-        ]);
-      } else {
-        context.selectedIndexSetSig.value = new Set([index]);
+  const selectionManager$ = $(
+    async (index: number | null, action: 'add' | 'toggle' | 'remove') => {
+      if (index === null) return;
+
+      const currItem = context.itemsMapSig.value.get(index);
+
+      const enabledIndex =
+        currItem && currItem.disabled ? await getNextEnabledItemIndex$(index) : index;
+
+      if (action === 'add') {
+        if (context.multiple) {
+          context.selectedIndexSetSig.value = new Set([
+            ...context.selectedIndexSetSig.value,
+            index,
+          ]);
+        } else {
+          context.selectedIndexSetSig.value = new Set([index]);
+        }
       }
-    }
 
-    if (action === 'toggle') {
-      if (context.selectedIndexSetSig.value.has(enabledIndex)) {
+      if (action === 'toggle') {
+        if (context.selectedIndexSetSig.value.has(enabledIndex)) {
+          context.selectedIndexSetSig.value = new Set(
+            [...context.selectedIndexSetSig.value].filter(
+              (selectedIndex) => selectedIndex !== enabledIndex,
+            ),
+          );
+        } else {
+          context.selectedIndexSetSig.value = new Set([
+            ...context.selectedIndexSetSig.value,
+            enabledIndex,
+          ]);
+        }
+      }
+
+      if (action === 'remove') {
         context.selectedIndexSetSig.value = new Set(
           [...context.selectedIndexSetSig.value].filter(
-            (selectedIndex) => selectedIndex !== enabledIndex,
+            (selectedIndex) => selectedIndex !== index,
           ),
         );
-      } else {
-        context.selectedIndexSetSig.value = new Set([
-          ...context.selectedIndexSetSig.value,
-          enabledIndex,
-        ]);
       }
-    }
-  });
+    },
+  );
 
   const getNextEnabledItemIndex$ = $((index: number) => {
     let offset = 1;
@@ -96,26 +105,11 @@ export function useSelect() {
     return `${context.localId}-${index}`;
   });
 
-  const extractedStrOrArrFromMap$ = $((propertyType: 'value' | 'displayValue') => {
-    const values = [];
-
-    for (const index of context.selectedIndexSetSig.value) {
-      const item = context.itemsMapSig.value.get(index);
-
-      if (item) {
-        values.push(item[propertyType]);
-      }
-    }
-
-    return values.length === 1 ? values[0] : values;
-  });
-
   return {
     getNextEnabledItemIndex$,
     getPrevEnabledItemIndex$,
     getActiveDescendant$,
     selectionManager$,
-    extractedStrOrArrFromMap$,
   };
 }