form icon indicating copy to clipboard operation
form copied to clipboard

Sync field meta with third party validation via useEffect

Open tomatau opened this issue 7 months ago • 0 comments

Describe the bug

Using a third party lib like Remix has some a11y features built in an its own Form validation that leverages native web API

It should be possible to synchronise the validity state from Remix into tanstack form so that things like submit buttons can react to the invalid state of a field

Your minimal, reproducible example

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

Steps to reproduce

  1. Type a value in the input
  2. Blur the input
  3. Clear the value from the input
  4. See that Remix has update to show the error message and inspect the console to see the useEffect has triggered which issued an update to the tanstack form instance through useFieldContext
  5. See the debug output in the pre tag of the form's state for this field hasn't been updated

Expected behavior

The form's state should reflect the new value issued by the useEffect

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • macOS
  • Chrome/Brave/etc...

It's reproduced in the stackblitz

TanStack Form adapter

None

TanStack Form version

1.9.0

TypeScript version

5.8.3

Additional context

No response

tomatau avatar May 14 '25 21:05 tomatau