fix: select validation

Author: thejackshelton

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

@@ -29,7 +29,7 @@ export default component$(() => {
         {(field, props) => {
           return (
             <Select.Root class="select" required>
-              <Select.HiddenNativeSelect {...props} />
+              <Select.HiddenNativeSelect field={field} {...props} />
               <Select.Label>Logged in users</Select.Label>
               <Select.Trigger class="select-trigger">
                 <Select.DisplayValue placeholder="Select an option" />

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

@@ -0,0 +1,43 @@
+import {
+  PropsOf,
+  Signal,
+  component$,
+  useContext,
+  useSignal,
+  useTask$,
+} from '@builder.io/qwik';
+import { isServer } from '@builder.io/qwik/build';
+import SelectContextId from './select-context';
+
+type HiddenSelectOptionProps = {
+  value: string;
+  displayValue: string;
+  nativeSelectRef: Signal<HTMLSelectElement | undefined>;
+  index: number;
+} & PropsOf<'option'>;
+
+export const HiddenSelectOption = component$(
+  ({ value, displayValue, nativeSelectRef, index, ...rest }: HiddenSelectOptionProps) => {
+    const optionRef = useSignal<HTMLOptionElement>();
+    const context = useContext(SelectContextId);
+
+    useTask$(async function modularFormsValidation({ track }) {
+      track(() => context.selectedIndexSetSig.value);
+
+      if (isServer || !nativeSelectRef.value || !optionRef.value) return;
+
+      // modular forms expects the input event fired after interaction
+      const inputEvent = new Event('input', { bubbles: false });
+      nativeSelectRef.value?.dispatchEvent(inputEvent);
+
+      // make sure to programmatically select the option after the input event has fired
+      optionRef.value.selected = context.selectedIndexSetSig.value.has(index);
+    });
+
+    return (
+      <option ref={optionRef} value={value} {...rest}>
+        {displayValue}
+      </option>
+    );
+  },
+);

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

@@ -1,6 +1,6 @@
-import { PropsOf, component$, useContext, useSignal, useTask$ } from '@builder.io/qwik';
+import { PropsOf, component$, useContext, useSignal } from '@builder.io/qwik';
 import SelectContextId from './select-context';
-import { isServer } from '@builder.io/qwik/build';
+import { HiddenSelectOption } from './hidden-select-option';
 import { VisuallyHidden } from '../../utils/visually-hidden';
 
 export type AriaHiddenSelectProps = {
@@ -19,6 +19,10 @@ export type AriaHiddenSelectProps = {
   disabled?: boolean;
 
   required?: boolean;
+
+  // from modular forms
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  field?: any;
 };
 
 export const HHiddenNativeSelect = component$(
@@ -27,28 +31,15 @@ export const HHiddenNativeSelect = component$(
     const context = useContext(SelectContextId);
 
     // modular forms does something with refs, doesn't seem we need it, and it overrides the ref we define here.
-    ref;
-
     const nativeSelectRef = useSignal<HTMLSelectElement>();
 
-    useTask$(function modularFormsValidation({ track }) {
-      track(() => context.selectedIndexSetSig.value);
-
-      if (isServer) return;
-
-      // modular forms expects the input event fired after interaction
-      const inputEvent = new Event('input', { bubbles: false });
-      nativeSelectRef.value?.dispatchEvent(inputEvent);
-    });
-
     // TODO: make conditional logic to show either input or select based on the size of the options.
     return (
       <VisuallyHidden>
         <div aria-hidden="true">
           <label>
             {label}
             <select
-              onFocus$={() => context.triggerRef.value?.focus()}
               ref={(element: HTMLSelectElement) => {
                 nativeSelectRef.value = element;
                 // @ts-expect-error modular forms ref function
@@ -66,13 +57,13 @@ export const HHiddenNativeSelect = component$(
             >
               <option />
               {Array.from(context.itemsMapSig.value.entries()).map(([index, item]) => (
-                <option
-                  value={item.value}
-                  selected={context.selectedIndexSetSig.value.has(index)}
+                <HiddenSelectOption
                   key={item.value}
-                >
-                  {item.displayValue}
-                </option>
+                  value={item.value}
+                  displayValue={item.displayValue}
+                  nativeSelectRef={nativeSelectRef}
+                  index={index}
+                />
               ))}
             </select>
           </label>