Question about onBlurAsync and submitting
Hi all,
I have a general question about form submission handling when onBlurAsync is in place.
Current setup
I mainly use form-level validation (e.g. onBlur, onDynamic, etc.)
I also have shared fields via field groups, and those include onBlurAsync / onDynamicAsync
Current behavior
If I type something into a field and then click the Submit button directly with the mouse, onBlurAsync is triggered — but the submit does not continue.
I saw this discussion:
https://github.com/TanStack/form/discussions/1592
It suggests setting canSubmitWhenInvalid to true, but that introduces other side effects / problems for us.
Expected behavior
My expectation would be: when canSubmitWhenInvalid is false, onBlurAsync should run and then the submit should continue (instead of being aborted - because then basically nothing happens).
Current workaround
Right now I’m doing this in the form component:
onSubmit={async (event) => {
event.preventDefault();
event.stopPropagation();
await form.validateAllFields('submit');
await form.handleSubmit();
}}
…but this doesn’t feel great.
Question
Is this intended behavior? And if so, is there a recommended workaround that doesn’t require setting canSubmitWhenInvalid to true?
I have a general question about form submission handling when onBlurAsync is in place.
Current setup
I mainly use form-level validation (e.g. onBlur, onDynamic, etc.)
I also have shared fields via field groups, and those include onBlurAsync / onDynamicAsync
Current behavior
If I type something into a field and then click the Submit button directly with the mouse, onBlurAsync is triggered — but the submit does not continue.
I saw this discussion:
https://github.com/TanStack/form/discussions/1592
It suggests setting canSubmitWhenInvalid to true, but that introduces other side effects / problems for us.
Expected behavior
My expectation would be: when canSubmitWhenInvalid is false, onBlurAsync should run and then the submit should continue (instead of being aborted - because then basically nothing happens).
Current workaround
Right now I’m doing this in the form component:
onSubmit={async (event) => {
event.preventDefault();
event.stopPropagation();
await form.validateAllFields('submit');
await form.handleSubmit();
}}
…but this doesn’t feel great.
Question
Is this intended behavior? And if so, is there a recommended workaround that doesn’t require setting canSubmitWhenInvalid to true?
GitHub
We are using an onBlurAsync validator on one of our fields. If we call handleSubmit() on the form while this validator is still running, handleSubmit() seems to simply abort: Neither our onSubmit()...
