onChangeAsyncDebounceMs not properly debouncing

[epotter2297]

Describe the bug

The debouncing logic when onChangeAsyncDebounceMs is specified does not seem to be working properly.

Your minimal, reproducible example

https://codesandbox.io/s/github/tanstack/form/tree/main/examples/react/zod?embed=1&theme=dark

Steps to reproduce

1. Start typing in the First Name field.

Expected behavior

As a user, I expected the debounce to wait until input stopped for 500ms until the async validator is executed. I also expected the submit button to remain disabled until the async validator is complete, and the <FieldInfo /> element to remain empty until the 500ms is complete.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: Windows
• Browser: Chrome

TanStack Form adapter

None

TanStack Form version

v0.19.0

TypeScript version

v5.4.3

Additional context

This seems to apply to all form adapters.

[Corbin Crutchley]

The disabled state you're looking for can be done with a single extra boolean:

<form.Subscribe
  selector={(state) => [state.canSubmit, state.isValidating, state.isSubmitting]}
  children={([canSubmit, isValidating, isSubmitting]) => (
    <button type="submit" disabled={!canSubmit && !isValidating}>
      {isSubmitting ? '...' : 'Submit'}
    </button>
  )}
/>

However, I'm not sure that there's a bug here. When you're typing, the following happens:

• It waits 1s to cooldown the typing to trigger a onChangeAsync function call
• After this 1s, if there is any other user input, it will:
  • Trigger a new onChangeAsync function call
  • Trigger a signal to the old onChangeAsync so you can cancel behavior if you'd like

And, according to my testing here - is exactly how this works currently, even in your unmodified code sample