Skip to content

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

Description

@phb-ig

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 #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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions