Skip to content

feat(core): add form listners for reset#2102

Open
harry-whorlow wants to merge 5 commits intomainfrom
reset-listeners
Open

feat(core): add form listners for reset#2102
harry-whorlow wants to merge 5 commits intomainfrom
reset-listeners

Conversation

@harry-whorlow
Copy link
Copy Markdown
Contributor

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

adds form listeners for the reset event

Summary by CodeRabbit

  • New Features

    • Added onReset listener support for forms and fields; onReset is invoked after a reset and receives the relevant API and reset value
    • Added a reset method to the Field API
    • Expanded listener cause types to include 'reset' and 'unmount'
  • Documentation

    • Updated Angular, React, and Vue guides to document the new onReset listener
  • Tests

    • Added tests covering form- and field-level onReset behavior and payloads

@harry-whorlow
Copy link
Copy Markdown
Contributor Author

relates to #1570

@nx-cloud
Copy link
Copy Markdown

nx-cloud bot commented Mar 31, 2026

View your CI Pipeline Execution ↗ for commit 9af508c

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

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 31, 2026

🚀 Changeset Version Preview

3 package(s) bumped directly, 10 bumped as dependents.

🟨 Minor bumps

Package Version Reason
@tanstack/form-core 1.28.6 → 1.29.0 Changeset
@tanstack/react-form 1.28.6 → 1.29.0 Changeset
@tanstack/svelte-form 1.28.6 → 1.29.0 Changeset
@tanstack/angular-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/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

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

📝 Walkthrough

Walkthrough

This PR adds reset listener support: introduces onReset for form- and field-level listeners, adds a reset method on FieldApi, and expands the ListenerCause union to include 'reset' and 'unmount'.

Changes

Cohort / File(s) Summary
Core APIs
packages/form-core/src/FieldApi.ts, packages/form-core/src/FormApi.ts, packages/form-core/src/types.ts
Added optional onReset callbacks to FieldListeners and FormListeners; implemented FieldApi.reset() which calls form.resetField(...) and the field onReset listener; updated FormApi.reset() to call form-level onReset; expanded ListenerCause to include 'reset' and 'unmount'.
Tests
packages/form-core/tests/FieldApi.spec.ts, packages/form-core/tests/FormApi.spec.ts
Added tests verifying field.reset() triggers field onReset with the default value and fieldApi, that form.reset() invokes form-level onReset (including when passing values), and that form.reset() does not call individual field onReset handlers.
Docs & Changeset
.changeset/reset-listeners.md, docs/framework/angular/guides/listeners.md, docs/framework/react/guides/listeners.md, docs/framework/vue/guides/listeners.md
Documented the new onReset listener in framework guides and added a changeset entry describing the public API updates.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant FieldApi
participant Form as FormStore
participant FieldListener
participant FormListener
Note over FieldApi,Form: Field-level reset flow
FieldApi->>Form: resetField(name)
Form-->>FieldApi: field state reset
FieldApi->>FieldListener: call onReset({ value, fieldApi })
Note over Form,FormListener: Form-level reset flow
Form->>Form: reset(values?)
Form-->>FormListener: call onReset({ formApi })

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I twitch my whiskers, ears alert and bright,
A gentle reset hops in, setting values right,
Fields and forms wake, their listeners sing,
Callbacks nuzzle in the soft new spring,
— a rabbit applauds each fresh restart tonight.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is minimal ('adds form listeners for the reset event') and does not follow the required template structure with 'Changes', 'Checklist', and 'Release Impact' sections. Expand the description to follow the template: add detailed explanation of changes under '🎯 Changes', complete the '✅ Checklist' items, and confirm '🚀 Release Impact' (changeset has been created).
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat(core): add form listners for reset' is directly related to the main changes, which add reset event listeners to the form and field APIs, but contains a typo ('listners' instead of 'listeners').
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch reset-listeners

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.

@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@2102

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 9af508c

@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.27%. Comparing base (6892ed0) to head (9af508c).
⚠️ Report is 164 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2102      +/-   ##
==========================================
- Coverage   90.35%   90.27%   -0.08%     
==========================================
  Files          38       49      +11     
  Lines        1752     2047     +295     
  Branches      444      532      +88     
==========================================
+ Hits         1583     1848     +265     
- 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 force-pushed the reset-listeners branch 2 times, most recently from d028b99 to 59c6210 Compare March 31, 2026 15:48
@harry-whorlow harry-whorlow marked this pull request as ready for review March 31, 2026 15:54
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: 2

🧹 Nitpick comments (1)
.changeset/reset-listeners.md (1)

5-5: Consider clarifying reset propagation semantics in the release note.

A short note that form.reset() does not invoke field-level onReset (only field.reset() does) would set clearer expectations for users upgrading.

📝 Suggested wording
-Add `onReset` listener support for forms and fields, add `reset` method to `FieldApi`, and expand `ListenerCause` type with `'reset'` and `'unmount'` values
+Add `onReset` listener support for forms and fields, add `reset` method to `FieldApi`, and expand `ListenerCause` type with `'reset'` and `'unmount'` values. Note: field-level `onReset` is triggered by `field.reset()`; `form.reset()` triggers only the form-level `onReset`.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.changeset/reset-listeners.md at line 5, The release note is unclear about
reset propagation: explicitly state that calling form.reset() will not trigger
field-level onReset listeners and that only calling field.reset() invokes those
field-level onReset handlers; mention the added FieldApi.reset method and the
new ListenerCause union values ('reset' and 'unmount') so readers know to update
expectations and listener handling when upgrading.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/framework/react/guides/listeners.md`:
- Line 23: The docs add global `onReset` but the "Form listeners" section omits
it; update the Form listeners subsection to document `onReset` alongside
`onMount`/`onSubmit` and the propagated `onChange`/`onBlur`. Describe when
`onReset` fires (form reset events), its signature/params, whether it is
propagated to fields, and give a short usage example/notes consistent with
`onSubmit`/`onMount` entries so the global event list and form-level
documentation match.

In `@packages/form-core/src/FieldApi.ts`:
- Around line 11-14: Remove the unused imports getBy and setBy from the import
list in FieldApi.ts: locate the import that currently lists getBy,
getSyncValidatorArray, mergeOpts, setBy and delete getBy and setBy so only used
utilities (e.g., getSyncValidatorArray, mergeOpts) remain; ensure no other
references to getBy or setBy exist in the file before committing.

---

Nitpick comments:
In @.changeset/reset-listeners.md:
- Line 5: The release note is unclear about reset propagation: explicitly state
that calling form.reset() will not trigger field-level onReset listeners and
that only calling field.reset() invokes those field-level onReset handlers;
mention the added FieldApi.reset method and the new ListenerCause union values
('reset' and 'unmount') so readers know to update expectations and listener
handling when upgrading.
🪄 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: 6f949218-a373-4a2f-aab6-b1e7a6e0c763

📥 Commits

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

📒 Files selected for processing (9)
  • .changeset/reset-listeners.md
  • docs/framework/angular/guides/listeners.md
  • docs/framework/react/guides/listeners.md
  • docs/framework/vue/guides/listeners.md
  • packages/form-core/src/FieldApi.ts
  • packages/form-core/src/FormApi.ts
  • packages/form-core/src/types.ts
  • packages/form-core/tests/FieldApi.spec.ts
  • packages/form-core/tests/FormApi.spec.ts

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: 1

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

Inline comments:
In `@docs/framework/react/guides/listeners.md`:
- Line 16: The header text "Field level events that can be "listened" to are:"
should use standard phrasing and a hyphenated adjective; update the phrase to
"Field-level events that can be listened to are:" by hyphenating "Field-level"
and removing the quotes around listened so the sentence reads naturally; locate
the string "Field level events that can be "listened" to are:" in the
listeners.md content and replace it accordingly.
🪄 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: a4fed69e-5a25-429f-a760-b27dc28c1881

📥 Commits

Reviewing files that changed from the base of the PR and between 3b60484 and 4b32346.

📒 Files selected for processing (3)
  • .changeset/reset-listeners.md
  • docs/framework/react/guides/listeners.md
  • packages/form-core/src/FieldApi.ts
✅ Files skipped from review due to trivial changes (1)
  • .changeset/reset-listeners.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/form-core/src/FieldApi.ts

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.

♻️ Duplicate comments (1)
docs/framework/react/guides/listeners.md (1)

16-16: ⚠️ Potential issue | 🟡 Minor

Fix phrasing on Line 16 for clarity and style consistency.

Line 16 still reads awkwardly (Field level and quoted "listened"). Use the standard phrasing below.

✏️ Suggested docs patch
-Field level events that can be "listened" to are:
+Field-level events that can be listened to are:
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/framework/react/guides/listeners.md` at line 16, Replace the awkward
phrasing `Field level events that can be "listened" to are:` with a clearer,
styled sentence such as `Field-level events that can be listened to include:`;
remove the unnecessary quotes around listened, add the hyphen in Field-level,
and end with a colon or "include:" for better flow in the document (edit the
line containing that exact text).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@docs/framework/react/guides/listeners.md`:
- Line 16: Replace the awkward phrasing `Field level events that can be
"listened" to are:` with a clearer, styled sentence such as `Field-level events
that can be listened to include:`; remove the unnecessary quotes around
listened, add the hyphen in Field-level, and end with a colon or "include:" for
better flow in the document (edit the line containing that exact text).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5cf35176-dc17-469a-b338-2d2320ed2758

📥 Commits

Reviewing files that changed from the base of the PR and between 4b32346 and 9af508c.

📒 Files selected for processing (9)
  • .changeset/reset-listeners.md
  • docs/framework/angular/guides/listeners.md
  • docs/framework/react/guides/listeners.md
  • docs/framework/vue/guides/listeners.md
  • packages/form-core/src/FieldApi.ts
  • packages/form-core/src/FormApi.ts
  • packages/form-core/src/types.ts
  • packages/form-core/tests/FieldApi.spec.ts
  • packages/form-core/tests/FormApi.spec.ts
✅ Files skipped from review due to trivial changes (4)
  • docs/framework/angular/guides/listeners.md
  • docs/framework/vue/guides/listeners.md
  • packages/form-core/src/types.ts
  • .changeset/reset-listeners.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/form-core/tests/FormApi.spec.ts

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