Skip to content

fix(listeners): rename onFieldUnmount to match that of the other listeners#2103

Open
harry-whorlow wants to merge 3 commits intomainfrom
unmount-rename
Open

fix(listeners): rename onFieldUnmount to match that of the other listeners#2103
harry-whorlow wants to merge 3 commits intomainfrom
unmount-rename

Conversation

@harry-whorlow
Copy link
Copy Markdown
Contributor

@harry-whorlow harry-whorlow commented Mar 31, 2026

Summary by CodeRabbit

  • Breaking Changes

    • Renamed form-level listener key from onFieldUnmount to onUnmount for consistency with other listeners.
  • New Features

    • Built-in debouncing for listeners via onChangeDebounceMs and onBlurDebounceMs.
  • Documentation

    • Added or updated comprehensive listener guides across frameworks covering events (onChange/onBlur/onMount/onSubmit/onUnmount), debouncing, field- and form-level listener examples, and propagated listener behaviors.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 23abda08-b5a4-4344-adcb-077dfc488359

📥 Commits

Reviewing files that changed from the base of the PR and between 2321807 and 8c6cc3f.

📒 Files selected for processing (2)
  • .changeset/rename-onFieldUnmount-to-onUnmount.md
  • docs/framework/vue/guides/listeners.md
✅ Files skipped from review due to trivial changes (1)
  • .changeset/rename-onFieldUnmount-to-onUnmount.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/framework/vue/guides/listeners.md

📝 Walkthrough

Walkthrough

A public API listener property was renamed from onFieldUnmount to onUnmount in form-core. Tests and a changeset were updated accordingly. Documentation across Angular, Lit, React, Solid, Svelte, and Vue was added or updated to document listeners, debouncing (onChangeDebounceMs/onBlurDebounceMs), and form-level listener propagation (including onUnmount).

Changes

Cohort / File(s) Summary
Core API Rename
packages/form-core/src/FormApi.ts, packages/form-core/src/FieldApi.ts
Renamed form-level listener property from onFieldUnmount to onUnmount in the FormListeners interface and updated the form-level invocation in the field teardown/unmount flow.
Test Updates
packages/form-core/tests/FieldApi.spec.ts, packages/react-form/tests/useField.test.tsx
Updated tests to register and assert listeners.onUnmount instead of listeners.onFieldUnmount for field-unmount scenarios.
Changelog
.changeset/rename-onFieldUnmount-to-onUnmount.md
Added changeset documenting the listener rename and a minor version bump for @tanstack/form-core.
Documentation: Angular & Vue (updated)
docs/framework/angular/guides/listeners.md, docs/framework/vue/guides/listeners.md
Updated prose/formatting; added “Built-in Debouncing” and “Form listeners” sections documenting debouncing keys and that form-level listeners propagate onChange/onBlur/onUnmount to children.
Documentation: React (updated)
docs/framework/react/guides/listeners.md
Expanded form-level listener propagation to explicitly include onUnmount and clarified listener parameter availability.
Documentation: Lit, Solid & Svelte (new pages)
docs/framework/lit/guides/listeners.md, docs/framework/solid/guides/listeners.md, docs/framework/svelte/guides/listeners.md
Added listener API guides covering supported events (onChange, onBlur, onMount, onSubmit, onUnmount), field- and form-level examples, debouncing options, and parameter shapes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A listener renamed, a tiny hop,
from field to form, I stopped and cop—
Debounce the whispers, propagate the song,
Six guides now sing the change along. 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The pull request description is empty and does not follow the required template with 'Changes' and 'Checklist' sections. Add a description explaining the change motivation and complete the checklist items (Contributing guide confirmation and testing confirmation).
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: renaming onFieldUnmount to onUnmount for consistency with other listener naming conventions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch unmount-rename

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud bot commented Mar 31, 2026

View your CI Pipeline Execution ↗ for commit 8c6cc3f

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

☁️ Nx Cloud last updated this comment at 2026-03-31 17:08:07 UTC

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 31, 2026

🚀 Changeset Version Preview

1 package(s) bumped directly, 12 bumped as dependents.

🟨 Minor bumps

Package Version Reason
@tanstack/form-core 1.28.6 → 1.29.0 Changeset
@tanstack/angular-form 1.28.6 → 1.29.0 Dependent
@tanstack/react-form 1.28.6 → 1.29.0 Dependent
@tanstack/react-form-nextjs 1.28.6 → 1.29.0 Dependent
@tanstack/react-form-remix 1.28.6 → 1.29.0 Dependent
@tanstack/react-form-start 1.28.6 → 1.29.0 Dependent
@tanstack/solid-form 1.28.6 → 1.29.0 Dependent
@tanstack/svelte-form 1.28.6 → 1.29.0 Dependent
@tanstack/vue-form 1.28.6 → 1.29.0 Dependent

🟩 Patch bumps

Package Version Reason
@tanstack/form-devtools 0.2.20 → 0.2.21 Dependent
@tanstack/lit-form 1.23.26 → 1.23.27 Dependent
@tanstack/react-form-devtools 0.2.20 → 0.2.21 Dependent
@tanstack/solid-form-devtools 0.2.20 → 0.2.21 Dependent

@harry-whorlow harry-whorlow marked this pull request as ready for review March 31, 2026 16:49
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 31, 2026

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2103

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2103

@tanstack/vue-form

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

commit: 8c6cc3f

@sentry
Copy link
Copy Markdown

sentry bot commented Mar 31, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.24%. Comparing base (6892ed0) to head (8c6cc3f).
⚠️ Report is 161 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2103      +/-   ##
==========================================
- Coverage   90.35%   90.24%   -0.11%     
==========================================
  Files          38       49      +11     
  Lines        1752     2041     +289     
  Branches      444      532      +88     
==========================================
+ Hits         1583     1842     +259     
- Misses        149      179      +30     
  Partials       20       20              

☔ 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.

@harry-whorlow harry-whorlow changed the title fix(listeners): rename unmount to match that of the other listeners fix(listeners): rename onFieldUnmount to match that of the other listeners Mar 31, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

Caution

Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted.

Error details
{}

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/form-core/src/FormApi.ts (1)

310-327: ⚠️ Potential issue | 🟡 Minor

Update generated/reference API docs to prevent stale listener naming.

FormListeners now exposes onUnmount, but docs/reference/interfaces/FormListeners.md still shows onFieldUnmount. Please update/regenerate the reference docs so users don’t implement the old key.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/form-core/src/FormApi.ts` around lines 310 - 327, The reference docs
are stale: the FormListeners interface now exposes onUnmount (in FormApi.ts) but
docs/reference/interfaces/FormListeners.md still show onFieldUnmount; regenerate
or update the generated reference markdown so the docs use onUnmount (and remove
or alias onFieldUnmount if needed), ensuring the docs for FormListeners and
examples/reference to onUnmount match the current FormApi declaration.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/form-core/src/FormApi.ts`:
- Around line 310-327: The reference docs are stale: the FormListeners interface
now exposes onUnmount (in FormApi.ts) but
docs/reference/interfaces/FormListeners.md still show onFieldUnmount; regenerate
or update the generated reference markdown so the docs use onUnmount (and remove
or alias onFieldUnmount if needed), ensuring the docs for FormListeners and
examples/reference to onUnmount match the current FormApi declaration.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b04a9c0e-18aa-4d14-b35a-31747bd896e2

📥 Commits

Reviewing files that changed from the base of the PR and between 4e7c8a6 and 2321807.

📒 Files selected for processing (11)
  • .changeset/rename-onFieldUnmount-to-onUnmount.md
  • docs/framework/angular/guides/listeners.md
  • docs/framework/lit/guides/listeners.md
  • docs/framework/react/guides/listeners.md
  • docs/framework/solid/guides/listeners.md
  • docs/framework/svelte/guides/listeners.md
  • docs/framework/vue/guides/listeners.md
  • packages/form-core/src/FieldApi.ts
  • packages/form-core/src/FormApi.ts
  • packages/form-core/tests/FieldApi.spec.ts
  • packages/react-form/tests/useField.test.tsx

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/rename-onFieldUnmount-to-onUnmount.md:
- Line 2: The changeset incorrectly marks the rename of the public listener key
onFieldUnmount to onUnmount as a minor change; update the changeset in
.changeset/rename-onFieldUnmount-to-onUnmount.md to use a major release type (or
alternatively implement and document a backward-compatible alias that preserves
onFieldUnmount while introducing onUnmount) so existing consumers are not
broken—refer to the public listener key names onFieldUnmount and onUnmount and
ensure the changeset reflects the breaking change or that compatibility code is
added.

In `@docs/framework/angular/guides/listeners.md`:
- Around line 107-110: The docs incorrectly state that onSubmit only receives
formApi; update the listeners documentation so onSubmit lists both parameters
(formApi and meta) to match the FormListeners.onSubmit signature in FormApi.ts.
Locate the onSubmit entry in the listeners doc (near the onMount/onSubmit
section) and add "meta" to the parameter list and description so handler
examples and types match the FormListeners.onSubmit ({ formApi, meta }) usage.

In `@docs/framework/lit/guides/listeners.md`:
- Around line 97-100: The guide incorrectly documents the onSubmit listener as
taking only formApi; update the signature and examples to include the second
parameter meta (i.e., onSubmit(formApi, meta)) to match the core typing in
FormApi (see packages/form-core/src/FormApi.ts), and adjust adjacent example
wording to reference both formApi and meta where applicable.

In `@docs/framework/solid/guides/listeners.md`:
- Around line 98-101: The docs for Solid's listeners incorrectly list only
`formApi` for `onSubmit`; update the listeners.md entry so `onSubmit` is
documented as receiving `{ formApi, meta }` (matching the definition in
packages/form-core/src/FormApi.ts), describe `meta` briefly (e.g., submission
metadata such as submission count or validation state), and ensure the `onMount`
listing remains unchanged; locate the `onSubmit` listener section in
listeners.md and add `meta` to the parameter list and its short description.

In `@docs/framework/svelte/guides/listeners.md`:
- Around line 98-101: The docs incorrectly state that both onMount and onSubmit
listeners receive only formApi; update the listeners.md text to reflect that
onSubmit receives an object { formApi, meta } while onMount receives only
formApi — reference the implementation in packages/form-core/src/FormApi.ts and
the listener names onSubmit and onMount to locate the code that needs editing
and ensure the docs list formApi for onMount and { formApi, meta } for onSubmit.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4f0920fd-b316-4bc9-b2a3-1f16da755ef1

📥 Commits

Reviewing files that changed from the base of the PR and between 4e7c8a6 and 2321807.

📒 Files selected for processing (11)
  • .changeset/rename-onFieldUnmount-to-onUnmount.md
  • docs/framework/angular/guides/listeners.md
  • docs/framework/lit/guides/listeners.md
  • docs/framework/react/guides/listeners.md
  • docs/framework/solid/guides/listeners.md
  • docs/framework/svelte/guides/listeners.md
  • docs/framework/vue/guides/listeners.md
  • packages/form-core/src/FieldApi.ts
  • packages/form-core/src/FormApi.ts
  • packages/form-core/tests/FieldApi.spec.ts
  • packages/react-form/tests/useField.test.tsx

@@ -0,0 +1,5 @@
---
'@tanstack/form-core': minor
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

This rename is breaking; the release type should be major (or keep backward compatibility).

Line 2 marks this as minor, but removing/renaming a public listener key breaks existing consumers using onFieldUnmount.

Suggested changeset fix
-'@tanstack/form-core': minor
+'@tanstack/form-core': major
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'@tanstack/form-core': minor
'@tanstack/form-core': major
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.changeset/rename-onFieldUnmount-to-onUnmount.md at line 2, The changeset
incorrectly marks the rename of the public listener key onFieldUnmount to
onUnmount as a minor change; update the changeset in
.changeset/rename-onFieldUnmount-to-onUnmount.md to use a major release type (or
alternatively implement and document a backward-compatible alias that preserves
onFieldUnmount while introducing onUnmount) so existing consumers are not
broken—refer to the public listener key names onFieldUnmount and onUnmount and
ensure the changeset reflects the breaking change or that compatibility code is
added.

Comment on lines +107 to +110
`onMount` and `onSubmit` listeners have the following parameters:

- `formApi`

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

onSubmit callback params are documented incorrectly.

This section says onSubmit only receives formApi, but FormListeners.onSubmit in packages/form-core/src/FormApi.ts (Line 292-308) is typed as { formApi, meta }. Please update docs to list meta for onSubmit to avoid incorrect handler signatures.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/angular/guides/listeners.md` around lines 107 - 110, The docs
incorrectly state that onSubmit only receives formApi; update the listeners
documentation so onSubmit lists both parameters (formApi and meta) to match the
FormListeners.onSubmit signature in FormApi.ts. Locate the onSubmit entry in the
listeners doc (near the onMount/onSubmit section) and add "meta" to the
parameter list and description so handler examples and types match the
FormListeners.onSubmit ({ formApi, meta }) usage.

Comment on lines +97 to +100
`onMount` and `onSubmit` listeners have the following parameters:

- `formApi`

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

onSubmit listener signature is incomplete in this guide.

onSubmit is documented as formApi-only, but core API typing in packages/form-core/src/FormApi.ts includes meta ({ formApi, meta }). Please correct this section and the adjacent example wording.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/lit/guides/listeners.md` around lines 97 - 100, The guide
incorrectly documents the onSubmit listener as taking only formApi; update the
signature and examples to include the second parameter meta (i.e.,
onSubmit(formApi, meta)) to match the core typing in FormApi (see
packages/form-core/src/FormApi.ts), and adjust adjacent example wording to
reference both formApi and meta where applicable.

Comment on lines +98 to +101
`onMount` and `onSubmit` listeners have the following parameters:

- `formApi`

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

onSubmit parameter docs are missing meta.

The docs currently imply onSubmit gets only formApi, but packages/form-core/src/FormApi.ts defines onSubmit props as { formApi, meta }. Please document meta explicitly for Solid as well.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/solid/guides/listeners.md` around lines 98 - 101, The docs for
Solid's listeners incorrectly list only `formApi` for `onSubmit`; update the
listeners.md entry so `onSubmit` is documented as receiving `{ formApi, meta }`
(matching the definition in packages/form-core/src/FormApi.ts), describe `meta`
briefly (e.g., submission metadata such as submission count or validation
state), and ensure the `onMount` listing remains unchanged; locate the
`onSubmit` listener section in listeners.md and add `meta` to the parameter list
and its short description.

Comment on lines +98 to +101
`onMount` and `onSubmit` listeners have the following parameters:

- `formApi`

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Svelte docs also omit meta for onSubmit.

This section should not group onSubmit with onMount as formApi-only. Per packages/form-core/src/FormApi.ts, onSubmit receives { formApi, meta }. Please update to prevent incorrect implementations.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/svelte/guides/listeners.md` around lines 98 - 101, The docs
incorrectly state that both onMount and onSubmit listeners receive only formApi;
update the listeners.md text to reflect that onSubmit receives an object {
formApi, meta } while onMount receives only formApi — reference the
implementation in packages/form-core/src/FormApi.ts and the listener names
onSubmit and onMount to locate the code that needs editing and ensure the docs
list formApi for onMount and { formApi, meta } for onSubmit.

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.

1 participant