fix(form-core): fix deleteField method
🎯 Changes
Fixes: https://github.com/TanStack/form/issues/1808
If this idea make sense, I will add tests
After calling form.deleteField('fieldName'), the field is removed from form.state.values, but after a moment it returns with defaultValue and appears at the end of the values object.
The problem occurred due to React lifecycle and the logic in FieldApi.mount()
Sequence of events:
- User clicks
delete->form.deleteField('field')executes -> value is remo ved fromform.state.values-> field metadata is removed - cool, but - React detects state change -> component re-renders
- During re-render the field is still in the DOM (not unmounted)
- React calls
FieldApi.update()or lifecycle hooks -> this callssetFieldValue - In
FieldApi.mount()there was logic:
if ((this.options.defaultValue as unknown) !== undefined) {
this.form.setFieldValue(this.name, this.options.defaultValue as never, {
dontUpdateMeta: true,
})
}
I think this uncoditionally restored defaultValue on every mount.update
PS: Even if we add a check in mount() - setFieldValue can be called from other places (e.g., from FieldApi.update() during React lifecycle).
I added a mechanism for tracking intentionally deleted fields to prevent their their accidental restoration.
- Added
_deletedFields: Set<string>inFormApi- it stores names of fields that were intentionally deleted by the user deleteField()adds the field to_deletedFieldssetFieldValue()blocks operations on deleted fields
✅ Checklist
- [X] I have followed the steps in the Contributing guide.
- [ ] I have tested this code locally with
pnpm test:pr.
🚀 Release Impact
- [ ] This change affects published code, and I have generated a changeset.
- [ ] This change is docs/CI/dev-only (no release).
⚠️ No Changeset found
Latest commit: 3b5d96696b9e900b662bf2469aeeb265d2eff30c
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
View your CI Pipeline Execution ↗ for commit 3b5d96696b9e900b662bf2469aeeb265d2eff30c
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:sherif,test:knip,tes... |
✅ Succeeded | 1m 44s | View ↗ |
nx run-many --target=build --exclude=examples/** |
✅ Succeeded | 34s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-12-15 11:31:57 UTC
More templates
- @tanstack/form-example-angular-array
- @tanstack/form-example-angular-large-form
- @tanstack/form-example-angular-simple
- @tanstack/form-example-angular-standard-schema
- @tanstack/form-example-lit-array
- @tanstack/form-example-lit-simple
- @tanstack/form-example-lit-standard-schema
- @tanstack/form-example-lit-ui-libraries
- @tanstack/form-example-react-array
- @tanstack/form-example-react-compiler
- @tanstack/form-example-react-devtools
- @tanstack/form-example-react-dynamic
- @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-svelte-array
- @tanstack/form-example-svelte-large-form
- @tanstack/form-example-svelte-simple
- @tanstack/form-example-svelte-standard-schema
- @tanstack/form-example-solid-array
- @tanstack/form-example-solid-devtools
- @tanstack/form-example-solid-large-form
- @tanstack/form-example-solid-simple
- @tanstack/form-example-solid-standard-schema
- @tanstack/form-example-vue-array
- @tanstack/form-example-vue-simple
- @tanstack/form-example-vue-standard-schema
@tanstack/angular-form
npm i https://pkg.pr.new/@tanstack/angular-form@1809
@tanstack/form-core
npm i https://pkg.pr.new/@tanstack/form-core@1809
@tanstack/form-devtools
npm i https://pkg.pr.new/@tanstack/form-devtools@1809
@tanstack/lit-form
npm i https://pkg.pr.new/@tanstack/lit-form@1809
@tanstack/react-form
npm i https://pkg.pr.new/@tanstack/react-form@1809
@tanstack/react-form-devtools
npm i https://pkg.pr.new/@tanstack/react-form-devtools@1809
@tanstack/react-form-nextjs
npm i https://pkg.pr.new/@tanstack/react-form-nextjs@1809
@tanstack/react-form-remix
npm i https://pkg.pr.new/@tanstack/react-form-remix@1809
@tanstack/react-form-start
npm i https://pkg.pr.new/@tanstack/react-form-start@1809
@tanstack/solid-form
npm i https://pkg.pr.new/@tanstack/solid-form@1809
@tanstack/solid-form-devtools
npm i https://pkg.pr.new/@tanstack/solid-form-devtools@1809
@tanstack/svelte-form
npm i https://pkg.pr.new/@tanstack/svelte-form@1809
@tanstack/vue-form
npm i https://pkg.pr.new/@tanstack/vue-form@1809
commit: 3b5d966
Blocked by #1729 . This seems critical to test with the linked PR.
@kusiewicz can you fix merge conflicts and then @LeCarbonator if you could, re review for @kusiewicz since the blocker is merged?
Thanks!
@kusiewicz can you fix merge conflicts and then @LeCarbonator if you could, re review for @kusiewicz since the blocker is merged?
Thanks!
Will do today!
Codecov Report
:x: Patch coverage is 93.33333% with 1 line in your changes missing coverage. Please review.
:white_check_mark: Project coverage is 89.74%. Comparing base (6892ed0) to head (3b5d966).
:warning: Report is 95 commits behind head on main.
| Files with missing lines | Patch % | Lines |
|---|---|---|
| packages/form-core/src/FormApi.ts | 90.90% | 1 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## main #1809 +/- ##
==========================================
- Coverage 90.35% 89.74% -0.62%
==========================================
Files 38 48 +10
Lines 1752 1940 +188
Branches 444 483 +39
==========================================
+ Hits 1583 1741 +158
- Misses 149 178 +29
- Partials 20 21 +1
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.