feat(select): getting option values at ssr

Author: thejackshelton

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

@@ -14,7 +14,7 @@ export default component$(() => {
     <Select class="relative min-w-40">
       <p>This one is the disabled</p>
       <SelectTrigger class="w-full border-2 border-dashed border-red-400">
-        <SelectValue />
+        <SelectValue placeholder="Select an option" />
       </SelectTrigger>
       <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
         {usersSig.value.map((user, index) => (

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

@@ -13,7 +13,7 @@ export default component$(() => {
   return (
     <Select class="relative min-w-40">
       <SelectTrigger class="w-full border-2 border-dashed border-red-400">
-        <SelectValue />
+        <SelectValue placeholder="Select an option" />
       </SelectTrigger>
       <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
         {usersSig.value.map((user) => (

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

@@ -0,0 +1,30 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+
+  return (
+    <Select value="Jessie" class="relative min-w-40">
+      <SelectTrigger class="w-full border-2 border-dashed border-red-400">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
+        {usersSig.value.map((user) => (
+          <SelectOption
+            class="border-dashed border-blue-400 data-[highlighted]:border-2"
+            key={user}
+          >
+            {user}
+          </SelectOption>
+        ))}
+      </SelectListbox>
+    </Select>
+  );
+});

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

@@ -18,6 +18,10 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="disabled" />
 </div>
 
+<div data-testid="select-uncontrolled-test">
+  <Showcase name="uncontrolled" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

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

@@ -20,7 +20,12 @@ export function createTestDriver<T extends DriverLocator>(locator: T) {
   };
 
   const getValue = async () => {
-    return await getTrigger().locator('[data-value]').textContent();
+    // annoyingly, it seems we need to check if the listbox is hidden in playwright, or else the value does not update
+    await expect(getListbox()).toBeHidden();
+
+    return await getTrigger()
+      .locator('[data-value]', { includeHidden: true })
+      .textContent();
   };
 
   const openListbox = async (key: OpenKeys | 'click') => {

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

@@ -370,7 +370,7 @@ test.describe('Keyboard Behavior', () => {
           AND the Enter key is pressed
           THEN option value should be the selected value
           AND should have an aria-selected of true`, async ({ page }) => {
-      const { getTrigger, getOptions, getValue, getListbox, openListbox } = await setup(
+      const { getTrigger, getOptions, getValue, openListbox } = await setup(
         page,
         'select-hero-test',
       );
@@ -382,8 +382,6 @@ test.describe('Keyboard Behavior', () => {
       const optStr = await options[0].textContent();
       await getTrigger().press('Enter');
 
-      // seems we need to await for the listbox to be hidden, otherwise the getValue does not update. ¯\_(ツ)_/¯
-      await expect(getListbox()).toBeHidden();
       const value = await getValue();
       expect(optStr).toEqual(value);
     });
@@ -488,3 +486,37 @@ test.describe('Disabled', () => {
     await expect(options[options.length - 2]).toHaveAttribute('data-highlighted');
   });
 });
+
+test.describe('Props', () => {
+  test(`GIVEN a basic select
+        WHEN there is a placeholder
+        THEN the placeholder should be presented instead of a selected value`, async ({
+    page,
+  }) => {
+    const { getValue } = await setup(page, 'select-hero-test');
+
+    await expect(await getValue()).toEqual('Select an option');
+  });
+
+  test(`GIVEN an uncontrolled select with a value prop on the root component
+        WHEN the value data matches the fourth option
+        THEN the selected value should be the data passed to the value prop`, async ({
+    page,
+  }) => {
+    const { getValue } = await setup(page, 'select-uncontrolled-test');
+
+    await expect(await getValue()).toEqual('Jessie');
+  });
+
+  // test(`GIVEN an uncontrolled select with a value prop on the root component
+  //       WHEN the value data matches the fourth option
+  //       THEN the fourth option should have aria-selected set to true`, async ({
+  //   page,
+  // }) => {
+  //   const { getValue, getOptions } = await setup(page, 'select-uncontrolled-test');
+
+  //   await expect(await getValue()).toEqual('Jessie');
+  //   const options = await getOptions();
+  //   await expect(await options[3]).toBeSelected();
+  // });
+});

packages/kit-headless/src/components/select/notes.md

@@ -62,6 +62,10 @@ What do they all have in common? How do people use them? What are the most impor
 
     ### Behavior
 
+    name: placeholder
+    type: string
+    description: sets a placeholder instead of a selected value.
+
     name: disabled
     type: boolean
     description: When true, the option is disabled.

packages/kit-headless/src/components/select/select-context.ts

@@ -18,4 +18,5 @@ export type SelectContext = {
   highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
   selectedIndexSig: Signal<number | null>;
+  value: string | undefined;
 };

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

@@ -9,6 +9,7 @@ import { SelectOption } from './select-option';
 */
 export const Select: FunctionComponent<SelectProps> = (props) => {
   const { children: myChildren, ...rest } = props;
+  let valuePropIndex = 0;
 
   const childrenToProcess = (
     Array.isArray(myChildren) ? [...myChildren] : [myChildren]
@@ -45,9 +46,17 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
       }
       case SelectOption: {
         child.props.index = currentIndex;
+        if (child.props.children === props.value) {
+          valuePropIndex = currentIndex;
+        }
+
         currentIndex++;
       }
     }
   }
-  return <SelectImpl {...rest}>{props.children}</SelectImpl>;
+  return (
+    <SelectImpl {...rest} valuePropIndex={valuePropIndex}>
+      {props.children}
+    </SelectImpl>
+  );
 };

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

@@ -6,6 +6,7 @@ import {
   useTask$,
   useSignal,
   $,
+  useComputed$,
 } from '@builder.io/qwik';
 import SelectContextId from './select-context';
 
@@ -21,8 +22,13 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
   const optionRef = useSignal<HTMLLIElement>();
   const localIndexSig = useSignal<number | null>(null);
 
-  const isHighlighted = !disabled && context.highlightedIndexSig.value === index;
-  const isSelected = !disabled && context.selectedIndexSig.value === index;
+  const isSelectedSig = useComputed$(() => {
+    return !disabled && context.selectedIndexSig.value === index;
+  });
+
+  const isHighlightedSig = useComputed$(() => {
+    return !disabled && context.highlightedIndexSig.value === index;
+  });
 
   useTask$(function getIndexTask() {
     if (index === undefined)
@@ -55,10 +61,10 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
       onPointerOver$={[handlePointerOver$, props.onPointerOver$]}
       ref={optionRef}
       tabIndex={-1}
-      aria-selected={isSelected}
+      aria-selected={isSelectedSig.value}
       aria-disabled={disabled === true ? 'true' : 'false'}
-      data-selected={isSelected ? '' : undefined}
-      data-highlighted={isHighlighted ? '' : undefined}
+      data-selected={isSelectedSig.value ? '' : undefined}
+      data-highlighted={isHighlightedSig.value ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       role="option"
     >