TanStack / TanStack/form

Using onChangeAsync in an array field causes isFieldsValidating to always be true after calling removeValue

Open
#2,234 1 comment 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

When using a validators config which has both onChangeListenTo and onChangeAsync in a subfield of an array mode field, removing any entry but the last of the array field will cause the listened-to fields in each shifted entry to be stuck on isValidating: true.

This does not happen when onChangeListenTo is included with onChange.
This does not happen when onChangeListenTo is not included with onChangeAsync.

Possibly related to https://github.com/TanStack/form/issues/2131 ?

Your minimal, reproducible example

https://codesandbox.io/p/devbox/array-mode-rerender-forked-56d2np?workspaceId=ws_XStUxd2y69i1A18WTfWXJw

Steps to reproduce

In the example sandbox, click the add button twice, then remove the first row and click submit.

Notice in the console logs that all errors are empty, and that the field meta for list[0].operator shows isValidating: true, even though it does not have a validator.

Comment out line 70, repeat the above steps, and notice that the form submits as normal.

Uncomment line 70, change onChangeAsync on line 71 to onChange, repeat the above steps, and notice that the form submits as normal.

Expected behavior

On aform submit, the listened-to field should show isValidating: false, and the form submission should succeed.

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

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 linked CodeSandbox and reproduce the issue by adding two rows, removing the first row, and submitting. Compare the async-validator path using onChangeListenTo with the working onChange and non-listened cases, focusing on shifted array entries and their isValidating state. Done means the listened-to field reports isValidating: false and submission succeeds after removing a non-final row.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.