Skip to content

Conversation

@PhilemonChiro
Copy link

@PhilemonChiro PhilemonChiro commented Jan 2, 2026

Summary

  • Change validation strategy from onChange to onBlur in the ExampleForm component
  • Prevents full Zod schema validation on every keystroke

Problem

The ExampleForm in the internal sink uses validators: { onChange: exampleFormSchema }, which validates the entire Zod schema on every keystroke. The schema contains expensive operations (regex checks, date calculations, refine() calls), causing noticeable input lag when typing in text fields.

Note: The GitHub issue mentions the "Bug Report Form", but that form (form-tanstack-demo.tsx) already uses onSubmit validation, which is correct. The actual performance issue is in example-form.tsx.

Solution

Changed validation to onBlur strategy:

  • Validates when a field loses focus (user tabs/clicks away)
  • User can type freely without lag
  • Matches the pattern used in other TanStack Form examples (e.g., form-tanstack-array.tsx)

File Changed

  • apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx (line 80)

Test plan

  • Verified no TypeScript errors
  • Type rapidly in the "Additional Comments" textarea - should have no lag

Fixes #9222

Change validation strategy from onChange to onBlur to prevent
validation on every keystroke, which causes input lag in textareas.
@vercel
Copy link
Contributor

vercel bot commented Jan 2, 2026

@PhilemonChiro is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: TanStack Form example has poor performance - textarea input lag due to real-time validation

1 participant