feat(select): onChange$ and onOpenChange$

Author: thejackshelton

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

@@ -0,0 +1,37 @@
+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']);
+  const counterSig = useSignal(0);
+
+  const handleChange$ = $((): void => {
+    counterSig.value++;
+  });
+
+  return (
+    <>
+      <Select onChange$={handleChange$} 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>
+      <p>You have changed {counterSig.value} times</p>
+    </>
+  );
+});

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

@@ -6,14 +6,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@qwik-ui/headless';
-
 export default component$(() => {
   const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
   const selectedVal = useSignal<string>('Ryan');
 
   return (
     <>
-      <Select bind:value={selectedVal} class="relative min-w-40">
+      <Select
+        onChange$={$(() => console.log('Changed!'))}
+        bind:value={selectedVal}
+        class="relative min-w-40"
+      >
         <SelectTrigger class="w-full border-2 border-dashed border-red-400">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>

apps/website/src/routes/docs/headless/select/examples/open-change.tsx

@@ -0,0 +1,37 @@
+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']);
+  const openChangeSig = useSignal(0);
+
+  const handleOpenChange$ = $((): void => {
+    openChangeSig.value++;
+  });
+
+  return (
+    <>
+      <Select onOpenChange$={handleOpenChange$} 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>
+      <p>The listbox opened and closed {openChangeSig.value} time(s)</p>
+    </>
+  );
+});

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

@@ -46,6 +46,18 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="add-users" />
 </div>
 
+## onChange$
+
+<div data-testid="select-change-test">
+  <Showcase name="change-value" />
+</div>
+
+## onOpenChange$
+
+<div data-testid="select-open-change-test">
+  <Showcase name="open-change" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

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

@@ -536,6 +536,35 @@ test.describe('Props', () => {
     await expect(await getValue()).toEqual('Select an option');
   });
 
+  test(`GIVEN a select with an onChange$ prop
+        WHEN the select value changes
+        THEN the placeholder should be presented instead of a selected value`, async ({
+    page,
+  }) => {
+    const { openListbox, getOptions, getRoot } = await setup(page, 'select-change-test');
+
+    await openListbox('click');
+
+    const options = await getOptions();
+    await options[3].click();
+
+    const sibling = getRoot().locator('+ p');
+    await expect(sibling).toHaveText('You have changed 1 times');
+  });
+
+  test(`GIVEN a select with an onOpenChange$ prop
+        WHEN the select value changes
+        THEN the placeholder should be presented instead of a selected value`, async ({
+    page,
+  }) => {
+    const { getRoot, openListbox } = await setup(page, 'select-open-change-test');
+
+    await openListbox('click');
+
+    const sibling = getRoot().locator('+ p');
+    await expect(sibling).toHaveText('The listbox opened and closed 1 time(s)');
+  });
+
   test.describe('uncontrolled', () => {
     test(`GIVEN an uncontrolled select with a value prop on the root component
           WHEN the value data matches the fourth option
@@ -586,7 +615,7 @@ test.describe('Props', () => {
   test.describe('controlled', () => {
     test(`GIVEN a controlled select with a bind:value prop on the root component
           WHEN the signal data matches the second option
-          THEN the selected value should be the data passed to the value prop`, async ({
+          THEN the selected value should be the data passed to the bind:value prop`, async ({
       page,
     }) => {
       const { getValue, getOptions } = await setup(page, 'select-controlled-test');

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

@@ -7,10 +7,12 @@ import {
   Signal,
   useTask$,
   useComputed$,
+  type QRL,
 } from '@builder.io/qwik';
 import { type SelectContext } from './select-context';
 import SelectContextId from './select-context';
 import { Opt } from './select-inline';
+import { isBrowser } from '@builder.io/qwik/build';
 
 export type SelectProps = PropsOf<'div'> & {
   value?: string;
@@ -21,6 +23,9 @@ export type SelectProps = PropsOf<'div'> & {
 
   // when a value is passed, we check if it's an actual option value, and get its index at pre-render time.
   _valuePropIndex?: number | null;
+
+  onChange$?: QRL<() => void>;
+  onOpenChange$?: QRL<() => void>;
 };
 
 /* root component in select-inline.tsx */
@@ -47,7 +52,7 @@ export const SelectImpl = component$<SelectProps>((props) => {
   const isListboxOpenSig = useSignal<boolean>(false);
 
   // Maps are apparently great for this index accessing. Will learn more about them this week and refactor this to have a more consistent API and eliminate redundancy / duplication.
-  useTask$(({ track }) => {
+  useTask$(function controlledValueTask({ track }) {
     const controlledValue = track(() => props['bind:value']?.value);
     if (!controlledValue) return;
 
@@ -58,6 +63,21 @@ export const SelectImpl = component$<SelectProps>((props) => {
     }
   });
 
+  useTask$(async function onChangeTask({ track }) {
+    track(() => selectedIndexSig.value);
+    if (isBrowser) {
+      await props.onChange$?.();
+    }
+  });
+
+  useTask$(function onOpenChangeTask({ track }) {
+    track(() => isListboxOpenSig.value);
+
+    if (isBrowser) {
+      props.onOpenChange$?.();
+    }
+  });
+
   const context: SelectContext = {
     triggerRef,
     popoverRef,