TanStack
Form options are stale after submit
Describe the bug
I want to disable the submit button after the submission. I compare options.defaultValues and values from the store to determine whether they are equal. However, the next render after submission contains stale options. This happens likely because of the useIsomorphicLayoutEffect that updates the options here. I wonder maybe the formApi.update can be called during the render
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/elated-brahmagupta-sj6mvk
Steps to reproduce
- Type "Johny" in the input
- Click the submit button
- Click the submit button again
Expected behavior
As a user, I expect that the submit button is disabled after the first click, but it becomes disabled only after the second click
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Chrome
TanStack Form adapter
react-form
TanStack Form version
v0.39.0
TypeScript version
v4.4.4
Additional context
If the useQuery is replaced with a useState then everything works as expected.
I wonder maybe the formApi.update can be called during the render
Unfortunately not, since it breaks the rules of React and therefore will cause malfunctions with the React compiler.
While it's not a fix itself, but a workaround for this specific case, I fixed the issue by calling formApi.reset() in onSubmit, looks legit enough
I would be very interested in this feature. We need a "You have unsaved changes" warning in a rather complex form, and for that, the form's initial state as per formApi.reset serves as a baseline validation.
For what it's worth, we don't have to do the comparison ourselves. I would be happy if we could get some variation of isFieldDirty that respects the initial state. But having access to the initial form state outside of that field meta would also be useful in the long run. I just don't know the inner workings of this library well enough to judge which is easier.
