feat(FieldApi): allow debounce of onChange and onBlur listener

[Pascalmh]

This allows you to listen to a change/blur event of a Field after a denounce you can set in millisecond.

It makes situations possible where you want to introduce a side effect after the user stopped typing or left the field for some time.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit aeb1e38.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	2m 15s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	20s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-04-10 09:06:59 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1375

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1375

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1375

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1375

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1375

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1375

commit: aeb1e38

[LeCarbonator]

The naming between the debounce properties seems inconsistent. onChangeDebounceMs vs. onBlurAsyncDebounceMs.
Since the debounce should ignore async vs. sync, the blur should be renamed to onBlurDebounceMs.

[codecov]

Codecov Report

Attention: Patch coverage is 97.14286% with 1 line in your changes missing coverage. Please review.

Project coverage is 89.04%. Comparing base (afdaad3) to head (aeb1e38).
Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/FieldApi.ts	97.14%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1375      +/-   ##
==========================================
+ Coverage   88.88%   89.04%   +0.16%     
==========================================
  Files          28       28              
  Lines        1277     1296      +19     
  Branches      335      340       +5     
==========================================
+ Hits         1135     1154      +19     
  Misses        126      126              
  Partials       16       16              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Balastrong]

I see you're using the existing timeoutIds but isn't that dangerous?

I mean, wouldn't it break if you have both a debounce on the validator and on the listener since they're sharing the same timeoutId?

[Pascalmh]

wouldn't it break if you have both a debounce on the validator and on the listener since they're sharing the same timeoutId?

Good catch - I've separated the validation and listener timeoutIds

[Balastrong]

LGTM, also thanks for adding the docs!