Merge pull request #635 from thejackshelton/feat/select

Feat/select

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

@@ -117,6 +117,20 @@ test.describe('Mouse Behavior', () => {
   //   await getTrigger().blur();
   //   await expect(getTrigger()).toBeFocused();
   // });
+
+  test(`GIVEN an open hero select
+        WHEN clikcking on the group label
+        THEN the listbox should remain open`, async ({ page }) => {
+    const { getRoot, openListbox, getListbox } = await setup(page, 'select-group-test');
+
+    await openListbox('click');
+
+    const label = getRoot().getByRole('listitem').first();
+
+    await expect(label).toBeVisible();
+    await label.click();
+    await expect(getListbox()).toBeVisible();
+  });
 });
 
 test.describe('Keyboard Behavior', () => {
@@ -1058,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/notes.md

@@ -62,6 +62,7 @@ resource: https://joshwayne.com/posts/the-problem-with-dropdowns/
     - [x] Typeahead support (user typing / filter)
     - [x] Looping
     - [ ] RTL support
+    - [ ] Form support
     - [x] Scrollable
     - [x] Aria (controls, roles, etc)
 

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

@@ -1,4 +1,4 @@
-import { type JSXNode, type FunctionComponent } from '@builder.io/qwik';
+import { type JSXNode, Component } from '@builder.io/qwik';
 import { SelectImpl, type SelectProps } from './select';
 import { SelectListbox } from './select-listbox';
 import { SelectOption } from './select-option';
@@ -7,13 +7,14 @@ import { SelectGroup } from './select-group';
 export type Opt = {
   isDisabled: boolean;
   value: string;
+  displayValue?: string;
 };
 
 /*
     This is an inline component. We create an inline component to get the proper indexes with CSR. See issue #4757 
     for more information.
 */
-export const Select: FunctionComponent<SelectProps> = (props) => {
+export const Select: Component<SelectProps> = (props: SelectProps) => {
   const { children: myChildren, ...rest } = props;
   let valuePropIndex = null;
   const childrenToProcess = (
@@ -65,15 +66,22 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
               .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-listbox.tsx

@@ -1,4 +1,12 @@
-import { component$, useStyles$, Slot, type PropsOf, useContext } from '@builder.io/qwik';
+import {
+  component$,
+  useStyles$,
+  Slot,
+  type PropsOf,
+  useContext,
+  useOnDocument,
+  $,
+} from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import styles from './select.css?inline';
 
@@ -9,6 +17,34 @@ export const SelectListbox = component$<SelectListboxProps>((props) => {
 
   const context = useContext(SelectContextId);
   const listboxId = `${context.localId}-listbox`;
+
+  const isOutside = $((rect: DOMRect, x: number, y: number) => {
+    return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+  });
+
+  const handleDismiss$ = $(async (e: PointerEvent) => {
+    if (!context.isListboxOpenSig.value) {
+      return;
+    }
+
+    if (!context.listboxRef.value || !context.triggerRef.value) {
+      return;
+    }
+
+    const listboxRect = context.listboxRef.value.getBoundingClientRect();
+    const triggerRect = context.triggerRef.value.getBoundingClientRect();
+    const { clientX, clientY } = e;
+
+    const isOutsideListbox = await isOutside(listboxRect, clientX, clientY);
+    const isOutsideTrigger = await isOutside(triggerRect, clientX, clientY);
+
+    if (isOutsideListbox && isOutsideTrigger) {
+      context.isListboxOpenSig.value = false;
+    }
+  });
+
+  useOnDocument('pointerdown', handleDismiss$);
+
   return (
     <ul
       {...props}

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

@@ -8,12 +8,13 @@ import {
   useTask$,
   type PropsOf,
 } from '@builder.io/qwik';
-import { isServer } from '@builder.io/qwik/build';
+import { isServer, isBrowser } from '@builder.io/qwik/build';
 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;
   });
@@ -57,7 +60,7 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
 
     cleanup(() => observer?.disconnect());
 
-    if (typeof window !== 'undefined') {
+    if (isBrowser) {
       observer = new IntersectionObserver(checkVisibility, {
         root: context.listboxRef.value,
         threshold: 1.0,

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

@@ -117,7 +117,10 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (context.isListboxOpenSig.value && !shouldOpen) {
-      console.log('heyyy');
+      if (e.key === 'Tab') {
+        context.isListboxOpenSig.value = false;
+      }
+
       // select options
       if (e.key === 'Enter' || e.key === ' ') {
         context.selectedIndexSig.value = context.highlightedIndexSig.value;
@@ -145,26 +148,16 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
   });
 
-  const handleBlur$ = $((event: FocusEvent) => {
-    const focusOutsideListbox = !context.listboxRef.value?.contains(
-      event.relatedTarget as Element,
-    );
-
-    if (focusOutsideListbox) {
-      context.isListboxOpenSig.value = false;
-    }
-  });
-
   return (
     <button
       {...props}
       ref={context.triggerRef}
       onClick$={[handleClick$, props.onClick$]}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
-      onBlur$={[handleBlur$, props.onBlur$]}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       aria-expanded={context.isListboxOpenSig.value}
+      preventdefault:blur
     >
       <Slot />
     </button>