form icon indicating copy to clipboard operation
form copied to clipboard

fix(form-core): fix deleteField method

Open kusiewicz opened this issue 2 months ago • 6 comments

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

  1. User clicks delete -> form.deleteField('field') executes -> value is remo ved from form.state.values -> field metadata is removed - cool, but
  2. React detects state change -> component re-renders
  3. During re-render the field is still in the DOM (not unmounted)
  4. React calls FieldApi.update() or lifecycle hooks -> this calls setFieldValue
  5. 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.

  1. Added _deletedFields: Set<string> in FormApi - it stores names of fields that were intentionally deleted by the user
  2. deleteField() adds the field to _deletedFields
  3. setFieldValue() 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).

kusiewicz avatar Oct 14 '25 18:10 kusiewicz

⚠️ 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

changeset-bot[bot] avatar Oct 14 '25 18:10 changeset-bot[bot]

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

nx-cloud[bot] avatar Oct 14 '25 18:10 nx-cloud[bot]

More templates

@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

pkg-pr-new[bot] avatar Oct 14 '25 18:10 pkg-pr-new[bot]

Blocked by #1729 . This seems critical to test with the linked PR.

LeCarbonator avatar Oct 15 '25 06:10 LeCarbonator

@kusiewicz can you fix merge conflicts and then @LeCarbonator if you could, re review for @kusiewicz since the blocker is merged?

Thanks!

crutchcorn avatar Dec 01 '25 19:12 crutchcorn

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

kusiewicz avatar Dec 02 '25 08:12 kusiewicz

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.

codecov[bot] avatar Dec 15 '25 11:12 codecov[bot]