TanStack / TanStack/form

Async initial array values are not set when form.Field is conditionally rendered

Open
#2,201 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug

Until version 1.31.0, it's been possible to set async initial values that are in the form of an array, where the form.Field that displays the array is conditionally rendered. In version 1.33.0, this does not seem to work anymore (it was broken from version 1.32.0). This bug is pretty similar to the issue I reported a couple of weeks ago, where the difference is that I now conditionally render the form.Field that displays the array. The use case for this, is showing a loading UI while the async data is fetched. It was concluded in my previous issue that it was a regression from https://github.com/TanStack/form/pull/2172, so I assume the same goes for this new issue.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-ehnyffpx?file=src%2Findex.tsx

Steps to reproduce
  1. Open the StackBlitz
  2. Notice that no person is displayed after 3 seconds, when the async state is updated and the loading UI disappears
  3. You may click the "Add person"-button to notice that there suddenly is 2 people in the list
Expected behavior

I would expect the form.Field to render the array when the async data is resolved and the form.Field is displayed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform
  • OS: macOS
  • Browser: Chrome
TanStack Form adapter

react-form

TanStack Form version

1.33.0 (from 1.32.0)

TypeScript version

6.0.3

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 minimal reproduction in the StackBlitz project, especially src/index.tsx, and compare behavior between the affected versions 1.32.0/1.33.0 and 1.31.0. Reproduce the conditional loading state and verify that the asynchronously resolved array appears when form.Field is rendered, without requiring an additional person to be added.

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
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.