Fix Array Swap Detection by crutchcorn · Pull Request #2172 · TanStack/form

crutchcorn · 2026-05-10T22:22:37Z

Fixes #2018 for all adapters

Summary by CodeRabbit

Bug Fixes
- Array form fields now properly re-render when array elements are reordered without changing the array length (e.g., swap, move operations).
Tests
- Added test coverage verifying array field re-rendering behavior across all framework adapters.

coderabbitai · 2026-05-10T22:22:49Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Introduces _arrayVersion counter to field metadata to track structural array changes. Increments this counter on array mutations (swap, move, insert, remove) via bumpArrayVersion helper. Updates all framework adapters—React, Preact, Vue, Svelte, Solid, and Angular—to watch this counter instead of array length for re-renders, ensuring components update when array values change without length changes.

Changes

Array Re-render on Value Change

Layer / File(s)	Summary
Data Shape: Array Version Counter `packages/form-core/src/FieldApi.ts`, `packages/form-core/src/metaHelper.ts`, `packages/form-core/tests/FieldApi.spec.ts`	`FieldMetaBase` adds `_arrayVersion: number`; `defaultFieldMeta` initializes it to `0`; test updated to expect the field.
Core Meta Helpers: Bump and Array Operations `packages/form-core/src/metaHelper.ts`	Introduce `bumpArrayVersion` helper and integrate it into array operation handlers (`handleArrayMove`, `handleArrayRemove`, `handleArraySwap`, `handleArrayInsert`); update metaHelper return to expose `bumpArrayVersion`.
FormApi: Initialize and Bump Array Version `packages/form-core/src/FormApi.ts`	Initialize `_arrayVersion` during field meta transform; call `bumpArrayVersion` after array mutations in `pushFieldValue`, `replaceFieldValue`, and `clearFieldValues`.
React & Preact Adapters: Array Version Reactivity `packages/react-form/src/useField.tsx`, `packages/react-form/tests/useField.test.tsx`, `packages/preact-form/src/useField.tsx`, `packages/preact-form/tests/useField.test.tsx`	Update `useField` reactivity selector to track `state.meta._arrayVersion` instead of array length; add tests validating re-render on swap.
Vue Adapter: Array Version Reactivity `packages/vue-form/src/useField.tsx`, `packages/vue-form/tests/useField.test.tsx`	Update Vue `useField` reactivity selector to track `state.meta._arrayVersion` for array-mode re-renders; add test validating re-render on swap.
Svelte Adapter: Array Version Reactivity `packages/svelte-form/src/Field.svelte`, `packages/svelte-form/tests/array-swap.svelte`, `packages/svelte-form/tests/array.test.ts`	Update Svelte `Field` reactive `storeSub` to track `state.meta._arrayVersion`; add test component and test suite validating re-render on swap.
Solid Adapter: Array Version Reactivity `packages/solid-form/src/createField.tsx`, `packages/solid-form/tests/createField.test.tsx`	Update Solid `createField` reactivity selector to track `state.meta._arrayVersion`; add test validating re-render on swap.
Angular Adapter: Array Version Reactivity `packages/angular-form/src/tanstack-field.ts`, `packages/angular-form/tests/tanstack-field.spec.ts`	Update Angular `TanStackField` reactivity selector to track `state.meta._arrayVersion`; add test validating re-render on swap.
Release Notes: Changeset Entry `.changeset/stale-berries-drop.md`	Document patch version bump across `@tanstack/*-form` packages for array re-render fix.

Sequence Diagram

sequenceDiagram
  participant Component as Array Field Component
  participant FormApi as FormApi
  participant MetaHelper as metaHelper
  participant Store as Reactive Store
  Component->>FormApi: swapFieldValues(fieldName, idx1, idx2)
  FormApi->>MetaHelper: bumpArrayVersion(fieldName)
  MetaHelper->>FormApi: setFieldMeta(fieldName, {_arrayVersion: N+1})
  FormApi->>Store: emit meta change
  Store->>Component: state.meta._arrayVersion dependency fires
  Component->>Component: re-render

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Arrays now dance without a care,
When swapping values here and there—
Version bumps track each little change,
No length checks needed in the range!
Six adapters march in fine array,
Re-renders happen every day! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 61.54% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The PR description is minimal and vague, only stating 'Fixes #2018 for all adapters' without explaining what changes were made.	Expand the description to explain what changes were made (introducing _arrayVersion meta tracking, updating adapters, etc.) and reference the issue details more comprehensively.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix Array Swap Detection' accurately describes the main change: fixing array swap/move detection so fields re-render properly when array values are swapped.
Linked Issues check	✅ Passed	The PR fully addresses issue `#2018` by implementing array version tracking via _arrayVersion meta counter, updating all adapter implementations (react, angular, preact, solid, svelte, vue) to use this counter instead of array length for change detection, and adding comprehensive tests for swap functionality across all adapters.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing array swap detection: new _arrayVersion tracking, adapter updates to use this counter, array operation handlers (swap, move, insert, remove), test coverage for swap behavior, and a changeset entry. No unrelated changes detected.

_{✏️ 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 fix-array-swap-detection

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.}

nx-cloud · 2026-05-10T22:23:00Z

View your CI Pipeline Execution ↗ for commit 124ce20

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

☁️ Nx Cloud last updated this comment at 2026-05-10 22:25:15 UTC

github-actions · 2026-05-10T22:23:16Z

🚀 Changeset Version Preview

7 package(s) bumped directly, 7 bumped as dependents.

🟨 Minor bumps

Package	Version	Reason
`@tanstack/angular-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/form-core`	1.31.0 → 1.32.0	Changeset
`@tanstack/react-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/solid-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/svelte-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/vue-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/react-form-nextjs`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-remix`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-start`	1.31.0 → 1.32.0	Dependent

🟩 Patch bumps

Package	Version	Reason
`@tanstack/preact-form`	1.29.6 → 1.29.7	Changeset
`@tanstack/form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/lit-form`	1.24.0 → 1.24.1	Dependent
`@tanstack/react-form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/solid-form-devtools`	0.2.26 → 0.2.27	Dependent

pkg-pr-new · 2026-05-10T22:23:39Z

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/preact-form

npm i https://pkg.pr.new/@tanstack/preact-form@2172

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: adad277

sentry · 2026-05-10T22:25:52Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.27%. Comparing base (6892ed0) to head (adad277).
⚠️ Report is 210 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2172      +/-   ##
==========================================
+ Coverage   90.35%   91.27%   +0.91%     
==========================================
  Files          38       59      +21     
  Lines        1752     2314     +562     
  Branches      444      568     +124     
==========================================
+ Hits         1583     2112     +529     
- Misses        149      181      +32     
- Partials       20       21       +1

☔ 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.

crutchcorn added 4 commits May 10, 2026 18:13

fix: handle array swap properly

39738b9

tests: add validation of swapFieldValue APIs

f383644

chore: add changeset

e785630

chore: update CI

124ce20

ci: apply automated fixes and generate docs

adad277

crutchcorn merged commit 4d250c0 into main May 10, 2026
6 of 7 checks passed

crutchcorn deleted the fix-array-swap-detection branch May 10, 2026 22:25

github-actions Bot mentioned this pull request May 10, 2026

ci: Version Packages #2168

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Array Swap Detection#2172

Fix Array Swap Detection#2172
crutchcorn merged 5 commits intomainfrom
fix-array-swap-detection

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

nx-cloud Bot commented May 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

sentry Bot commented May 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

crutchcorn commented May 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Poem

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

nx-cloud Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

🟨 Minor bumps

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

sentry Bot commented May 10, 2026

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

nx-cloud Bot commented May 10, 2026 •

edited

Loading

github-actions Bot commented May 10, 2026 •

edited

Loading

pkg-pr-new Bot commented May 10, 2026 •

edited

Loading