Discriminated unions + conditionally rendered fields

[pifantastic]

Describe the bug

When using discriminated unions and conditionally rendered fields, it's possible to get into a bad state.

It's a bit hard to explain, so see the reproduction steps + stackblitz.

It's possible that there is a better approach here that I don't see. Very open to that.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-ccufpzmq?file=src%2Findex.tsx,package.json&preset=node

Steps to reproduce

1. Click submit
2. Note the validation error "thisField is required"
3. Switch from "this" to "that"
4. Note the Submit button is disabled and no validation errors are present

Expected behavior

Either the submit button should be enabled so that the user can submit the form and see validation errors, or validation should trigger automatically.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome

TanStack Form adapter

react-form

TanStack Form version

1.23.4

TypeScript version

No response

Additional context

No response

[pifantastic]

Ah, just discovered canSubmitWhenInvalid. That might get me what I need.

[vcheeze]

@pifantastic I am running into the exact same scenario. Even in your reproduction above, simply adding canSubmitWhenInvalid: true only enables the submit button, but it won't display the error. How did you work around this?

[raae]

I managed to get Stackbliz working by conditionally rendering the UI, aka children of form.AppField. Removing the whole field puts the form in a wonky state.

Modified Blitz: https://stackblitz.com/edit/tanstack-form-nuccyazw

CleanShot.2025-11-06.at.18.25.15.mp4