form icon indicating copy to clipboard operation
form copied to clipboard

`canSubmit` is always `true` on first render of form

Open engelkes-finstreet opened this issue 1 year ago • 4 comments

Describe the bug

I am using a form with the zodValidator and have several field-level validations. On the first render the canSubmit property is true even though several fields are invalid. After changing the first input the validations run and canSubmit is invalid.

Your minimal, reproducible example

https://tanstack.com/form/latest/docs/framework/react/examples/zod

Steps to reproduce

  1. Go to the official zod example
  2. The Submit button is enabled even though the firstName has a minLength validation of 3
  3. Type something in any of the fields
  4. The Submit button is disabled until all the validations are correct

Expected behavior

I would expect that the canSubmit property considers all validations on the first render and shows a disabled Submit button from the start instead of changing from enabled to disabled after typing one letter and going back to enabled after all validations are correct.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: MacOS Browser: Arc

TanStack Form adapter

react-form

TanStack Form version

0.20.2

TypeScript version

No response

Additional context

No response

engelkes-finstreet avatar May 29 '24 09:05 engelkes-finstreet