fix(select): get proper controlled props

Author: thejackshelton

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

@@ -9,26 +9,30 @@ import {
 } from '@qwik-ui/headless';
 export default component$(() => {
   useStyles$(styles);
-  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
-  const selectedVal = useSignal<string>('Ryan');
+  const usersSig = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+  const selected = useSignal<string>('Ryan');
 
   return (
     <>
-      <Select bind:value={selectedVal} class="select">
+      <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">
-          {usersSig.value.map((user) => (
+          {usersSig.map((user) => (
             <SelectOption class="select-option" key={user}>
               {user}
             </SelectOption>
           ))}
         </SelectListbox>
       </Select>
-      <button onClick$={$(() => (selectedVal.value = 'Jessie'))}>
-        Click me to change val!
-      </button>
+      <p>Your favorite user is: {selected.value}</p>
     </>
   );
 });

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

@@ -14,7 +14,7 @@ import SelectContextId from './select-context';
 import { Opt } from './select-inline';
 import { isBrowser } from '@builder.io/qwik/build';
 
-export type SelectProps = PropsOf<'div'> & {
+export type SelectProps = Omit<PropsOf<'div'>, 'onChange$'> & {
   value?: string;
   'bind:value'?: Signal<string>;
 
@@ -24,7 +24,7 @@ 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>;
+  onChange$?: QRL<(value: string) => void>;
   onOpenChange$?: QRL<() => void>;
 
   scrollOptions?: ScrollIntoViewOptions;
@@ -80,7 +80,7 @@ export const SelectImpl = component$<SelectProps>((props) => {
   useTask$(async function onChangeTask({ track }) {
     track(() => selectedIndexSig.value);
     if (isBrowser) {
-      await props.onChange$?.();
+      await props.onChange$?.(optionsSig.value[selectedIndexSig.value!].value);
     }
   });
 
@@ -108,14 +108,17 @@ export const SelectImpl = component$<SelectProps>((props) => {
   useContextProvider(SelectContextId, context);
 
   return (
-    <div
-      role="combobox"
-      ref={rootRef}
-      data-open={context.isListboxOpenSig.value ? '' : undefined}
-      data-closed={!context.isListboxOpenSig.value ? '' : undefined}
-      {...props}
-    >
-      <Slot />
-    </div>
+    <>
+      {/* @ts-expect-error Qwik expects onChange$ types */}
+      <div
+        role="combobox"
+        ref={rootRef}
+        data-open={context.isListboxOpenSig.value ? '' : undefined}
+        data-closed={!context.isListboxOpenSig.value ? '' : undefined}
+        {...props}
+      >
+        <Slot />
+      </div>
+    </>
   );
 });