Skip to content

onChangeListenTo doesn't trigger onChange when using form.AppField #2100

@Albandale

Description

@Albandale

Describe the bug

When using form.Field directly, onChangeListenTo correctly triggers the onChange validator on the listening field when the listened to field changes. However, when using AppField created via createFormHook, onChangeListenTo doesn't seem to work correctly as the onChange doesn't trigger when the listened to field changes.

The minimum working example in the codesandbox demonstrates this.
Under the first h1 the form is created via createFormHook so the password and confirm_password are using form.AppField with confirm_password having set onChangeListenTo: ["password"]. When you type into password the onChange doesn't get triggered on confirm_password although it listens to password.

Under the second h1 the setup is the same except that the form is created via useForm and form.Field is being used. Here the onChange is correctly triggered unlike when using form.AppField.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/939gzk

Steps to reproduce

In the minimum reproduction:

  1. Type into the first password input
  2. You can see that the message "Passwords do not match" does not appear as onChange is not being triggered.

To create a minimum reproduction yourself:

  1. Create a simple textInput for use as pre-bounded component
  2. Create a form hook via createFormHook with the textInput as pre-bound component
  3. Add two form.AppField like password and confirm-passowrd where the second listens to the first via onChangeListenTo
  4. Type in the first field (the watched one)
  5. Observe that the second field's onChange validator does not fire

Expected behavior

As a user that is using form.AppField with onChangeListenTo behaves the sames as with using form.Field.
This means that onChange of confirm-password should run when the form.AppField has onChangeListenTo: ["password"] and I type into the form.Appfield password.

In the minimum reproction the two inputs above using form.AppField should behave the same as the two inputs below using form.Field

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Ubuntu 24.04.4 LTS
  • Browser: Brave
  • Version: Brave 1.87.191

TanStack Form adapter

react-form

TanStack Form version

1.28.6

TypeScript version

5.9.3

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions