TanStack/formPublic

NotificationsYou must be signed in to change notification settings
Fork594
Star6.3k

Comments

fix(form-core): 🐛 File input field - Picking a different file does not trigger rerender (deep equality issue with File/Blob objects)#1939

Open

joaoGabriel55 wants to merge 6 commits intoTanStack:mainfrom

joaoGabriel55:fix/file-input-field-picking-a-different-file-does-not-trigger-rerender

Open

fix(form-core): 🐛 File input field - Picking a different file does not trigger rerender (deep equality issue with File/Blob objects)#1939
joaoGabriel55 wants to merge 6 commits intoTanStack:mainfrom
joaoGabriel55:fix/file-input-field-picking-a-different-file-does-not-trigger-rerender

Conversation

Copy link

joaoGabriel55 commentedDec 15, 2025

Issue:#1932

🎯 Changes

Add support for file values with UUID in setFieldValue

✅ Checklist

I have followed the steps in theContributing guide.
I have tested this code locally withpnpm test:pr.

🚀 Release Impact

This change affects published code, and I have generated achangeset.
This change is docs/CI/dev-only (no release).

fix: Add support for file values with uuid in setFieldValue

f461a64

Copy link

changeset-botbot commentedDec 15, 2025•
edited
Loading

⚠️ No Changeset found

Latest commit:df74f02

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

fernandollisboa reviewed

Dec 15, 2025

View reviewed changes

packages/form-core/tests/FormApi.spec.ts OutdatedShow resolvedHide resolved

joaoGabriel55 added2 commits

December 15, 2025 16:44

test: Fix test descriptions and assertions for file value with uuid

52899a3

Move file handling logic from FormApi to setBy utility

e52c1a6

LeCarbonator requested changes

Dec 17, 2025

View reviewed changes

packages/form-core/src/utils.ts Outdated

		* @private
		*/
		export function setBy(obj: any, _path: any, updater: Updater<any>) {
		const isFile = updater instanceof File

Copy link

Contributor

LeCarbonatorDec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

React Native does not haveFile defined and will throw aReferenceError. You cannot implement the fix this way.

Copy link

Author

joaoGabriel55Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Oh. Truly. Good catch, thanks!

Copy link

nx-cloudbot commentedDec 17, 2025•
edited
Loading

View yourCI Pipeline Execution ↗ for commitdf74f02

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

☁️Nx Cloud last updated this comment at2025-12-19 08:23:26 UTC

ci: apply automated fixes and generate docs

9145eca

Copy link

pkg-pr-newbot commentedDec 17, 2025•
edited
Loading

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit:df74f02

Copy link

codecovbot commentedDec 17, 2025•
edited
Loading

Codecov Report

❌ Patch coverage is66.66667% with5 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.25%. Comparing base (6892ed0) to head (df74f02).
⚠️ Report is 111 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/utils.ts	66.66%	5 Missing⚠️

Additional details and impacted files

@@            Coverage Diff             @@##             main    #1939      +/-   ##==========================================- Coverage   90.35%   89.25%   -1.11%==========================================  Files          38       48      +10       Lines        1752     1954     +202       Branches      444      498      +54     ==========================================+ Hits         1583     1744     +161- Misses        149      189      +40- 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.

joaoGabriel55 added2 commits

December 18, 2025 11:11

patch: Add isFile utility and use it for file value checks

45c3e2a

Merge branch 'fix/file-input-field-picking-a-different-file-does-not-…

df74f02

…trigger-rerender' of github-personal.com:joaoGabriel55/form into fix/file-input-field-picking-a-different-file-does-not-trigger-rerender

joaoGabriel55 requested a review fromLeCarbonator

January 5, 2026 11:00

LeCarbonator requested changes

Jan 6, 2026

View reviewed changes

Copy link

Contributor

LeCarbonator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

It looks like the previous comment hasn't been addressed between the previous review and this review request.

The actual required changes don't look that bad, though. Perhaps I'll have some time to help out later this week with that.

packages/form-core/src/utils.ts

		if (!path.length) {
		return functionalUpdate(updater, parent)
		return functionalUpdate(
		isFile(updater) ? { file: updater, uuid: uuid() } : updater,

Copy link

Contributor

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

This isn't type safe. This wrongly asserts File field values as{ file: File | (oldFile: File) => File, uuid: string } instead of

actually running the updater
Preserving the expected field value's structure

packages/form-core/src/utils.ts

		}

		export function evaluate<T>(objA: T, objB: T) {
		if (objA instanceof File && objB instanceof File) {

Copy link

Contributor

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

It looks like the previous comment wasn't addressed, despite the request for another review. This will throwReferenceErrors in environments whereFile is not present (such as React Native).

packages/form-core/tests/FormApi.spec.ts

		const firstFile = new File(['first'], 'first.png', { type: 'image/png' })
		form.setFieldValue('avatar', firstFile)

		const firstValue = form.state.values.avatar as { file: File; uuid: string }

Copy link

Contributor

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

These type assertions are a huge problem. It cannot stay.

Luckily, as long asevaluate properly handlesFile types, this whole uuid trickery won't be needed. Just make sure to add unit tests for a File comparison withevaluate. I believe the existing tests can be found inutils.spec.ts.

Labels

None yet

Movatterモバイル変換

Uh oh!

Comments

Conversation

joaoGabriel55 commentedDec 15, 2025

🎯 Changes

✅ Checklist

🚀 Release Impact

Uh oh!

changeset-botbot commentedDec 15, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Uh oh!

Uh oh!

Uh oh!

LeCarbonatorDec 17, 2025

Choose a reason for hiding this comment

Uh oh!

joaoGabriel55Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

nx-cloudbot commentedDec 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

pkg-pr-newbot commentedDec 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

codecovbot commentedDec 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Codecov Report

Uh oh!

LeCarbonator left a comment

Choose a reason for hiding this comment

Uh oh!

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

Uh oh!

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

Uh oh!

LeCarbonatorJan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-botbot commentedDec 15, 2025•
edited
Loading

nx-cloudbot commentedDec 17, 2025•
edited
Loading

pkg-pr-newbot commentedDec 17, 2025•
edited
Loading

codecovbot commentedDec 17, 2025•
edited
Loading