-
-
Notifications
You must be signed in to change notification settings - Fork 607
onChangeListenTo doesn't trigger onChange when using form.AppField #2100
Description
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:
- Type into the first password input
- 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:
- Create a simple textInput for use as pre-bounded component
- Create a form hook via createFormHook with the textInput as pre-bound component
- Add two form.AppField like password and confirm-passowrd where the second listens to the first via onChangeListenTo
- Type in the first field (the watched one)
- 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