Skip to main content

Source: ocean/docs/select-validation-fix.md | ✏️ Edit on GitHub

Fix: Enable TanStack Form validation on Radix UI Select fields

Background​

In the signup form, the Industry and Data Hosting Region dropdowns (built with Radix UI Select via shadcn/ui) were never clearing their "empty" validation errors when a value was chosen. As a result, TanStack Form continued to treat the form as invalid and blocked submission, even though values were selected.

Root Cause​

The Radix UI Select component's onValueChange handler was wired only to update the field value via field.handleChange(value). However, TanStack Form requires a field to be "touched" and re-validated so that its internal isValid state is updated. The Select change alone did not trigger those steps.

Solution​

Ensure each Select field:

  1. Marks the field as touched (via field.handleBlur()),
  2. Updates the form state (via field.handleChange(value)), and
  3. Immediately runs its validation (via field.validate('change')).

This forces TanStack Form to re-run the onChange validator and clear the empty-error state.

Code Changes​

--- a/src/components/signup-form.tsx
+++ b/src/components/signup-form.tsx
@@ Industry field
-            <Select onValueChange={field.handleChange} value={field.state.value}>
+            <Select
+              onValueChange={(value) => {
+                field.handleBlur()
+                field.handleChange(value)
+                field.validate('change')
+              }}
+              value={field.state.value}
+            >

@@ Region field
-            <Select onValueChange={field.handleChange} value={field.state.value}>
+            <Select
+              onValueChange={(value) => {
+                field.handleBlur()
+                field.handleChange(value)
+                field.validate('change')
+              }}
+              value={field.state.value}
+            >

Outcome​

After applying this change, selecting an option in either dropdown immediately updates the field's validation state, allowing the form to become valid and submit as expected.

— End of Document —