Merge pull request #814 from thejackshelton/fix-validation

Fix validation

Author: thejackshelton

.changeset/late-ravens-smoke.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: select validates correctly with modular forms

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 = {
@@ -27,28 +27,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 +53,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>

packages/kit-headless/src/components/select/select.test.ts

@@ -1066,7 +1066,7 @@ test.describe('Props', () => {
           THEN the selected value matches the 5th option's value`, async ({ page }) => {
       const { getTrigger } = await setup(page, 'controlled-value');
 
-      await expect(getTrigger()).toHaveText('Select an option');
+      await expect(getTrigger()).toHaveText('Ryan');
       await page.getByRole('button', { name: 'Change to Abby' }).click();
 
       await expect(getTrigger()).toHaveText(`Abby`);
@@ -1081,7 +1081,7 @@ test.describe('Props', () => {
     }) => {
       const { driver: d } = await setup(page, 'controlled-value');
 
-      await expect(d.getTrigger()).toHaveText('Select an option');
+      await expect(d.getTrigger()).toHaveText('Ryan');
       // setup
       await page.getByRole('button', { name: 'Change to Abby' }).click();
       await expect(d.getTrigger()).toHaveText(`Abby`);