🐛 File input field: Picking a different file does not trigger rerender (deep equality issue with File/Blob objects)

[UdaraWanasinghe]

Describe the bug

When using a file input with TanStack Form (react-form), if a user picks a different file (even with different content and lastModified/name), the internal form state updates, but the field component does not rerender. The new file appears in the internal store, but the field.state.value and field render output remain unchanged. This makes it impossible to show the newly picked file in the UI. This seems due to TanStack Form's deep equality check (evaluate function) which for File/Blob objects treats different files as equal, since their own enumerable properties are empty. Object.keys(file) is []. As a result, the derived state is not replaced and UI updates are skipped.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/923ck3

Steps to reproduce

1. Create a Field configured for a file (avatar/image upload) in react-form
2. Select any file via the browser file picker
3. Select a different file (with a different name/content/lastModified)
4. Observe: field.handleChange is called, internal state updates, but the form.Field component does not rerender.
5. If you wrap the File in an envelope (e.g., {file, _uid: Date.now()}), rerenders work as expected

Expected behavior

As a user, I expect picking a different File object to update the field's value, trigger a rerender, and display the new file in the UI.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

• OS: Windows, macOS (any)
• Browser: Chrome, latest

TanStack Form adapter

No response

TanStack Form version

v4.0.0 (latest at time of writing)

TypeScript version

v5.4.4

Additional context

Deep equality function (evaluate) relies on Object.keys for deep objects, but File/Blob exposes properties only via prototype getters, so two File instances are treated as equal if no envelope is used. Other primitive or array types work as expected. Suggested fix: detect File/Blob specially and fall back to reference/identity check, or treat any non-enumerable object without primitive valueOf as unequal from another instance.

[UdaraWanasinghe]

Temporary fix

<input
  type="file"
  multiple={false}
  onChange={(e) => {
    const file = e.target.files?.[0];
    if (file) {
      Object.defineProperties(file, {
        name: {
          value: file.name,
          enumerable: true,
        },
        size: {
          value: file.size,
          enumerable: true,
        },
        type: {
          value: file.type,
          enumerable: true,
        },
      });

      field.handleChange(file as any);
    }
  }}
/>

[joaoGabriel55]

I am working on that! Thanks @UdaraWanasinghe for the temporary fix.