How to do a submit when blurring an onBlurAsync field with one click ?

[amarant]

If i use onBlurAsync on a field, when I edit the field with a valid value if I click the submit button while the cursor still being on the field then the onBlurAsync will be called and the submit will not be registered :

example stackblitz

Do you have any guidance on how to have async blur validation + submit with 1 click in this scenario ?

Also in my app form using createFormHook, useFormContext, withForm, ... I have 2 onBlurAsync called, the submit button flickering and sometimes a submit sometimes not.

[apoorva-01]

This isn't really an async validation problem, it's a focus race. When you press down on the submit button, the input loses focus first, onBlurAsync fires, and the re-render from that swallows your click before it ever reaches the button. Classic "blur eats the click."

The fix is to stop the input from blurring on the press. Put onMouseDown with preventDefault on the submit button:

<button
  type="submit"
  onMouseDown={(e) => e.preventDefault()}
>
  Submit
</button>

preventDefault on mousedown blocks the default focus shift, so the input keeps focus and the click lands every time. The click still fires, only the blur is suppressed.

One thing to watch: because the input no longer blurs on that press, onBlurAsync won't run there either. So if you were relying on that async check to gate submission, move (or copy) it into onSubmitAsync so handleSubmit still runs it:

const form = useForm({
  validators: {
    onSubmitAsync: async ({ value }) => {
      // same async check you had in onBlurAsync
    },
  },
})

handleSubmit awaits onSubmitAsync, so you get the validation on submit without depending on blur timing. That also clears up the double-onBlurAsync flicker you're seeing with createFormHook, since submit stops fighting the blur cycle.

[MILLERMARRU]

This is a browser behavior rather than a TanStack Form quirk, and it shows up specifically because of how the submit button's disabled state is likely wired.

Pressing down on the submit button while the field still has focus fires that field's blur before the click completes, which is what kicks off onBlurAsync. If the submit button's disabled attribute is bound to something like !canSubmit or isValidating (the pattern shown in TanStack Form's own validation guide), that attribute can flip to true in the same tick the blur handler runs, between the button's mousedown and its click. A native <button disabled> that becomes disabled in that exact window causes the browser to drop the pending click entirely, it never fires, which matches "the submit will not be registered" exactly.

TanStack Form's own docs already call out the fix for this, for a different reason (accessibility), which happens to solve this too: "disabled buttons are not accessible, use aria-disabled instead." Swapping the native disabled for aria-disabled keeps the button genuinely clickable at the DOM level (so the browser never cancels the click), while the handler itself checks the form state before doing anything:

<button
  type="submit"
  aria-disabled={!canSubmit}
  onClick={(e) => {
    if (!canSubmit) e.preventDefault()
  }}
>
  Submit
</button>

Since onBlur and onChange validators already re-run as part of handleSubmit itself, there's no need for the click to wait on the blur-triggered async validator to resolve first, the submit's own validation pass covers the same field again regardless of whether the blur fired in time.