form icon indicating copy to clipboard operation
form copied to clipboard

fix(form-core, react-form): remove overwritting of falsy values upon array element shifting

Open juanvilladev opened this issue 8 months ago • 5 comments

This PR addresses two issues:

#1363: Temporary undefined field.state.value during React re-renders

#1439: Falsy values being overwritten when field/form stores go out of sync

  1. Fix for #1439

When array operations like remove, shift, or swap are performed, the form and field stores can temporarily go out of sync. Previously, we were overwriting all falsy values (e.g., 0, false, '') during this sync process.

To fix this, I added a ternary check to preserve the original value when it's falsy but not undefined. This prevents unintended overwrites of valid falsy inputs.

  1. Fix for #1363

React was re-rendering while the field store was briefly out of sync with the form store, leading to field.state.value being undefined. During this transitional state, we now return null from the field component, which avoids runtime errors and prevents rendering invalid state.

Additionally, we were encountering an error reading errorMap from undefined. This was due to how we retrieved field names within form-level validators.

The fix includes:

Switching to baseStore instead of the derived store when accessing the form state (from validators). This is because baseStore is the true source of truth and reflects updates immediately, even during field deletion. This ensures we always have an up-to-date list of active fields.

Let me know if anything needs more clarification or if you'd like to walk through any part of the solution!

juanvilladev avatar Apr 21 '25 22:04 juanvilladev

View your CI Pipeline Execution ↗ for commit b79e4b2dd1b783744a32e5dcc05baec8c04e1252.

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

☁️ Nx Cloud last updated this comment at 2025-05-05 21:08:14 UTC

nx-cloud[bot] avatar Apr 21 '25 22:04 nx-cloud[bot]

More templates

@tanstack/angular-form

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

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

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

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

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

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

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

commit: b79e4b2

pkg-pr-new[bot] avatar Apr 21 '25 22:04 pkg-pr-new[bot]

Codecov Report

:x: Patch coverage is 55.55556% with 4 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 88.82%. Comparing base (8634cee) to head (b79e4b2). :warning: Report is 132 commits behind head on main.

Files with missing lines Patch % Lines
packages/form-core/src/FieldApi.ts 0.00% 3 Missing and 1 partial :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1440      +/-   ##
==========================================
- Coverage   88.98%   88.82%   -0.16%     
==========================================
  Files          31       31              
  Lines        1398     1405       +7     
  Branches      353      354       +1     
==========================================
+ Hits         1244     1248       +4     
- Misses        137      140       +3     
  Partials       17       17              

: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 Apr 21 '25 22:04 codecov[bot]

Completed all updates, I believe this is ready for review.

  • Confirmed we no longer get the issue with uncontrolled components
  • Confirmed we no longer get the error regarding reading errorMap from undefined from validators
  • Confirmed falsy values are no longer being set to undefined upon deleting array field elements

juanvilladev avatar Apr 22 '25 02:04 juanvilladev

Hello @Balastrong @juanvilladev 👋

I think a similar issue was reported recently that might be addressed by this PR?

I would be curious to know what the status on this fix is?

Thanks for everything 🙂

tmarnet avatar May 28 '25 17:05 tmarnet

Won't be able to look into this for a while

juanvilladev avatar Sep 14 '25 02:09 juanvilladev