fix(form-core, react-form): remove overwritting of falsy values upon array element shifting #1440
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… deleting array field This commit fixes TanStack#1439 which will preserve existing falsy values within the update function when nameHasChanged is true
|
View your CI Pipeline Execution ↗ for commit 8cd5554.
☁️ Nx Cloud last updated this comment at |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1440 +/- ##
==========================================
- Coverage 88.97% 88.81% -0.16%
==========================================
Files 31 31
Lines 1397 1404 +7
Branches 353 354 +1
==========================================
+ Hits 1243 1247 +4
- Misses 137 140 +3
Partials 17 17 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…olled when removing array fields TanStack#1363 This commit updates React to not render component when in transitory state of stores being out of sync due to array shifting
…Store as the source of logic instead of derived store.
|
Completed all updates, I believe this is ready for review.
|
juanvilladev
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
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.
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!