TanStack / TanStack/form

Async default values not applied to untouched fields after other fields are edited

Open
#2,229 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

v1
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

Describe the bug

When a form is created with defaultValues that include a field whose value arrives asynchronously, that field does not receive its updated default value after the async data loads if the user has already edited another field in the meantime.

The async field stays empty instead of being populated with the loaded default.

This is important to make forms usable while small parts of it are still loading, avoiding the need to block the entire form to workaround the issue. In our case, the user should be able to modify other fields, even if the form is not ready for submission yet (we disable the submit button and the pending fields).

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/goofy-chatelet-q8r3ff

Steps to reproduce

In the reproduction example:

  1. Render the form (the async field starts with an empty default).
  2. Before the async value resolves (3s), type into the name field.
  3. Wait for the async value to load.
  4. Observe that asyncField remains empty instead of showing "loaded default".
Expected behavior

When async data arrives and defaultValues are updated on re-render, untouched fields should receive their new default values even if other fields have already been edited.

Screenshots or Videos

https://github.com/user-attachments/assets/f2892c24-d4a9-4a6e-9fee-b8800d3d44db

Platform

TanStack Form adapter: React (@tanstack/react-form)
Browser: Chrome (latest)
OS: macOS

TanStack Form adapter

None

TanStack Form version

1.33.0

TypeScript version

No response

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React adapter and reproduce the behavior using the linked CodeSandbox: edit name before the async default resolves, then inspect how updated defaultValues are applied. Add coverage for the untouched asyncField case and verify that it receives "loaded default" while the edited field remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.