Conditional disable submit button
Hey everyone! 
I'm having an issue with TanStack Form and button state management. Everything works as expected except for one scenario:
Expected behavior:
- Button starts disabled
- Enable when form changes
- Disable if values return to original
- Disable after successful submit
(this is the issue)
- Re-enable if user makes changes after submit
Current issue:
After first submit, button stays enabled. Only disables after submitting a second time without changes.
FYI, I'm using form composition technique.
My current implementation:
```tsx
<form.Subscribe
selector={(state) => [
state.isSubmitting,
state.isDirty,
state.isDefaultValue,
state.isSubmitSuccessful,
]}
>
{([isSubmitting, isDirty, isDefaultValue, isSubmitSuccessful]) => {
const isDisabled =
isSubmitting | | isDefaultValue | | (isSubmitSuccessful && !isDirty);
return (
<Button
type="submit"
size="sm"
disabled={isDisabled}
onClick={handleSubmit}
>
{isSubmitting ? (
<LoaderPinwheelIcon className="animate-spin" />
) : (
label
)}
</Button>
);
}}
</form.Subscribe>
I'm having an issue with TanStack Form and button state management. Everything works as expected except for one scenario:
Expected behavior:
- Button starts disabled
- Enable when form changes
- Disable if values return to original
- Disable after successful submit
(this is the issue)- Re-enable if user makes changes after submit
Current issue:
After first submit, button stays enabled. Only disables after submitting a second time without changes.
FYI, I'm using form composition technique.
My current implementation:
```tsx
<form.Subscribe
selector={(state) => [
state.isSubmitting,
state.isDirty,
state.isDefaultValue,
state.isSubmitSuccessful,
]}
>
{([isSubmitting, isDirty, isDefaultValue, isSubmitSuccessful]) => {
const isDisabled =
isSubmitting | | isDefaultValue | | (isSubmitSuccessful && !isDirty);
return (
<Button
type="submit"
size="sm"
disabled={isDisabled}
onClick={handleSubmit}
>
{isSubmitting ? (
<LoaderPinwheelIcon className="animate-spin" />
) : (
label
)}
</Button>
);
}}
</form.Subscribe>
