feat(select): added value prop

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx

@@ -0,0 +1,38 @@
+import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+import styles from './select.css?inline';
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+  const selected = useSignal<string>('Ryan');
+
+  return (
+    <>
+      <Select
+        onChange$={$((value: string) => {
+          selected.value = value;
+        })}
+        bind:value={selected}
+        class="select"
+      >
+        <SelectTrigger class="select-trigger">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectListbox class="select-listbox">
+          {users.map((user, index) => (
+            <SelectOption value={index.toString()} class="select-option" key={user}>
+              {user}
+            </SelectOption>
+          ))}
+        </SelectListbox>
+      </Select>
+      <button onClick$={$(() => (selected.value = '4'))}>Change to Abby</button>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/select/examples/controlled.tsx

@@ -16,6 +16,7 @@ export default component$(() => {
     <>
       <Select
         onChange$={$((value: string) => {
+          console.log('value: ', value);
           selected.value = value;
         })}
         bind:value={selected}

apps/website/src/routes/docs/headless/select/examples/option-value.tsx

@@ -0,0 +1,36 @@
+import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+import styles from './select.css?inline';
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+  const selected = useSignal<string | null>(null);
+
+  const handleChange$ = $((value: string) => {
+    selected.value = value;
+  });
+
+  return (
+    <>
+      <Select onChange$={handleChange$} class="select">
+        <SelectTrigger class="select-trigger">
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectListbox class="select-listbox">
+          {users.map((user, index) => (
+            <SelectOption value={index.toString()} class="select-option" key={user}>
+              {user}
+            </SelectOption>
+          ))}
+        </SelectListbox>
+      </Select>
+      <p>The selected value is: {selected.value ?? 'null'}</p>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/select/index.mdx

@@ -40,6 +40,18 @@ Reveals a list of options to choose from, often triggered by a button.
   <Showcase name="controlled" />
 </div>
 
+## Passing a value
+
+<div data-testid="select-option-value-test">
+  <Showcase name="option-value" />
+</div>
+
+## Controlled + The value prop
+
+<div data-testid="select-controlled-value-test">
+  <Showcase name="controlled-value" />
+</div>
+
 ## Adding Users
 
 <div data-testid="select-add-users-test">

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -1072,6 +1072,40 @@ test.describe('Props', () => {
       await expect(options[1]).toHaveAttribute('aria-selected', 'true');
     });
   });
+
+  test.describe('option value', () => {
+    test(`GIVEN a select with distinct display and option values
+          WHEN the 2nd option is selected
+          THEN the selected value matches the 2nd option's value`, async ({ page }) => {
+      const { openListbox, getTrigger, getRoot } = await setup(
+        page,
+        'select-option-value-test',
+      );
+
+      await openListbox('Enter');
+      const changeStr = getRoot().locator('+ p');
+      await expect(changeStr).toContainText('The selected value is: null');
+      await getTrigger().focus();
+      await getTrigger().press('ArrowDown');
+      await getTrigger().press('Enter');
+
+      await expect(changeStr).toContainText('The selected value is: 1');
+    });
+
+    test(`GIVEN a select with distinct display and option values
+          WHEN a controlled value is set to the 5th option
+          THEN the selected value matches the 5th option's value`, async ({ page }) => {
+      const { getTrigger, getRoot, getOptions } = await setup(
+        page,
+        'select-controlled-value-test',
+      );
+
+      await expect(getTrigger()).toHaveText('Select an option');
+      await getRoot().locator('+ button').click();
+      const options = await getOptions();
+      await expect(getTrigger()).toHaveText(`${await options[4].textContent()}`);
+    });
+  });
 });
 
 test.describe('A11y', () => {

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

@@ -7,6 +7,7 @@ import { SelectGroup } from './select-group';
 export type Opt = {
   isDisabled: boolean;
   value: string;
+  displayValue?: string;
 };
 
 /*
@@ -65,15 +66,22 @@ export const Select: Component<SelectProps> = (props: SelectProps) => {
               .props.children}.`,
           );
         }
+
         child.props.index = currentIndex;
+        const isDisabled = child.props.disabled === true;
+        const value = (
+          child.props.value ? child.props.value : child.props.children
+        ) as string;
+
         const opt: Opt = {
-          isDisabled: child.props.disabled === true,
-          value: child.props.children as string,
+          isDisabled,
+          value,
+          displayValue: child.props.children as string,
         };
 
         opts.push(opt);
 
-        if (child.props.children === props.value) {
+        if (value === props.value) {
           valuePropIndex = currentIndex;
         }
 

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

@@ -14,6 +14,7 @@ import SelectContextId from './select-context';
 export type SelectOptionProps = PropsOf<'li'> & {
   index?: number;
   disabled?: boolean;
+  value?: string;
 };
 
 export const SelectOption = component$<SelectOptionProps>((props) => {
@@ -24,6 +25,8 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
   const localIndexSig = useSignal<number | null>(null);
   const optionId = `${context.localId}-${index}`;
 
+  console.log('value: ', props.value);
+
   const isSelectedSig = useComputed$(() => {
     return !disabled && context.selectedIndexSig.value === index;
   });

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

@@ -12,7 +12,7 @@ export const SelectValue = component$((props: SelectValueProps) => {
 
   const displayStrSig = useComputed$(() => {
     if (context.selectedIndexSig.value !== null) {
-      return context.optionsSig.value[context.selectedIndexSig.value].value;
+      return context.optionsSig.value[context.selectedIndexSig.value].displayValue;
     } else {
       return props.placeholder;
     }

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

@@ -8,10 +8,12 @@ export function useTypeahead() {
   const prevTimeoutSig = useSignal<undefined | NodeJS.Timeout>(undefined);
 
   const firstCharOptionsSig = useComputed$(() => {
-    return context.optionsSig.value.map((opt) => opt.value.slice(0, 1).toLowerCase());
+    return context.optionsSig.value.map((opt) =>
+      opt.displayValue?.slice(0, 1).toLowerCase(),
+    );
   });
   const fullStrOptionsSig = useComputed$(() => {
-    return context.optionsSig.value.map((opt) => opt.value.toLowerCase());
+    return context.optionsSig.value.map((opt) => opt.displayValue?.toLowerCase());
   });
 
   const typeahead$ = $((key: string): void => {
@@ -75,7 +77,7 @@ export function useTypeahead() {
 
       const firstPossibleOpt = fullStrOptionsSig.value.findIndex((str) => {
         const size = inputStrSig.value.length;
-        return str.substring(0, size) === inputStrSig.value;
+        return str?.substring(0, size) === inputStrSig.value;
       });
       if (firstPossibleOpt !== -1) {
         context.highlightedIndexSig.value = firstPossibleOpt;