[@tanstack/svelte-form] Form Subscribe property "isSubmitting" is not reactive #1513
Comments
|
Found a related issue https://github.com/ralf-boltshauser/tanstack-form-isSubmitting-issue Tried the approach of converting the validators (onBlur, onChange) to their async counterparts and the isSubmitting value is updated, but only on the second click of the submit button |
|
Closing issue, did a thorough investigation and it seems that some of
6979
the async operations on Using @tanstack/svelte-form along with @tanstack/svelte-query and here is a snippet of the integration const query = createMutation({
mutationKey: [
'query',
],
mutationFn: async (data) => {
// LOGIC
},
})
const form = createForm(() => ({
onSubmit: async ({ value }) => {
await new Promise<void>((resolve, reject) => {
$query.mutateAsync(value, {
onSuccess: () => resolve(),
onError: () => reject(),
})
})
// OR
await $query.mutateAsync(value)
},
// OTHER PROPS
})For those that will stumble into this issue, make sure you properly await all async operations and/or for callback-based operations, promisify those operations to make sure that the |
Describe the bug
The example provided on the documentation
https://tanstack.com/form/latest/docs/framework/svelte/guides/validation#preventing-invalid-forms-from-being-submitted
The props provided by the children() snippet are not reactive. I was trying to debug the example and see if the canSubmit & isSubmitting flags are changing
The text on the button never changes, but a separate
(@debug state.isSubmitting}indeed shows the value is changing but is not re-rendered.Using a separately declared variable to track the submission with $state() on top level works as expected.
Your minimal, reproducible example
N/A
Steps to reproduce
Follow the example on the documentation
Expected behavior
The state variables must be reactive so it can be re-rendered
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
Mozilla Firefox 139.0b8
TanStack Form adapter
None
TanStack Form version
@tanstack/svelte-form: 1.11.1
TypeScript version
5.8.3
Additional context
No response
The text was updated successfully, but these errors were encountered: