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>
- 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>
2 Replies
rival-black•5w ago
forms don‘t reset after submission by default. Perhaps that‘s what you were looking for?
If you don‘t need to reset after submission, simply use
isSubmittedgenetic-orangeOP•4w ago
isSubmitted does not fit because if user modifies form after, submit button stay disabled until user refresh page. That's why i'm using other selectors to avoid this behaviour.