Issues on migrating from final-form to @tanstack/react-form

[douglasjunior]

Describe the bug

I'm trying to migrate from final-form to @tanstack/react-form, but I struggled with some issues that I cant figure out how to solve at the moment.

1. The first one may be a bug, but form.state.isValid starts with true even with invalid fields.

   Maybe related to canSubmit in form is true even if some fields are unvalid #358

   This can be reproduced even in the CodeSandbox example: https://codesandbox.io/p/devbox/boring-dust-crdfdk

   It's important to mention that I can't force the form submission or field validation because we need to keep the field as isTouched = false.

2. Focused state in the field

   Final-form has a meta in the field to indicate that this field is on focus, in the same context, the form has an array indicating the focused fields.

   This is useful to handle some situations in complex screens and also to highlight components.

   Today the @tanstack/react-form only handles the blur event to update the isTouched state.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/boring-dust-crdfdk

Steps to reproduce

Just render the app and take a look at the Form status.

Expected behavior

When the form mounts, the validations must be run to allow the form to update the isValid state.

How often does this bug happen?

Every time

Screenshots or Videos

Initial render:

After blurring the field:

After submit:

Platform

• OS: MacOS
• Browser: Chrome
• Version: Latest

TanStack Form adapter

react-form

TanStack Form version

0.37.1

TypeScript version

5.3.3

Additional context

No response