fix(select): refactored openChange$ and onChange$

Author: thejackshelton

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

@@ -10,14 +10,17 @@ import styles from './select.css?inline';
 export default component$(() => {
   useStyles$(styles);
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const openChangeSig = useSignal(0);
+  const changeCount = useSignal(0);
+  const isOpen = useSignal(false);
 
-  const handleOpenChange$ = $((): void => {
-    openChangeSig.value++;
+  const handleOpenChange$ = $((open: boolean): void => {
+    isOpen.value = open;
+    changeCount.value++;
   });
 
   return (
     <>
+      <span>It is currently: {isOpen.value ? 'open' : 'closed'}</span>
       <Select onOpenChange$={handleOpenChange$} class="select">
         <SelectTrigger class="select-trigger">
           <SelectValue placeholder="Select an option" />
@@ -30,7 +33,7 @@ export default component$(() => {
           ))}
         </SelectListbox>
       </Select>
-      <p>The listbox opened and closed {openChangeSig.value} time(s)</p>
+      <p>The listbox opened and closed {changeCount.value} time(s)</p>
     </>
   );
 });

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

@@ -27,15 +27,15 @@ export type SelectProps = PropsOf<'div'> & {
   _valuePropIndex?: number | null;
 
   onChange$?: QRL<(value: string) => void>;
-  onOpenChange$?: QRL<() => void>;
+  onOpenChange$?: QRL<(open: boolean) => void>;
 
   scrollOptions?: ScrollIntoViewOptions;
   loop?: boolean;
 };
 
 /* root component in select-inline.tsx */
 export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
-  const { _options, ...rest } = props;
+  const { _options, onChange$, onOpenChange$, ...rest } = props;
 
   // refs
   const rootRef = useSignal<HTMLDivElement>();
@@ -86,15 +86,15 @@ export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
   useTask$(async function onChangeTask({ track }) {
     track(() => selectedIndexSig.value);
     if (isBrowser && selectedIndexSig.value !== null) {
-      await rest.onChange$?.(optionsSig.value[selectedIndexSig.value!].value);
+      await onChange$?.(optionsSig.value[selectedIndexSig.value!].value);
     }
   });
 
   useTask$(function onOpenChangeTask({ track }) {
     track(() => isListboxOpenSig.value);
 
     if (isBrowser) {
-      rest.onOpenChange$?.();
+      onOpenChange$?.(isListboxOpenSig.value);
     }
   });