Factory `onSubmit` function not invoked whenever factory.useForm gets provided with `onSubmit` itself

[Darko Efremov]

Describe the bug

Hey!

In a case where I used a createFormFactory from react-form, and then using the useForm hook it exposes, when I provided the useForm hook with onSubmit and onSubmitInvalid, the onSubmit and onSubmitInvalid from the form factory parameters did not get invoked.

const formFactory = createForm({
    onSubmit: async ({ value }) => console.log('valid', value),
    onSubmitInvalid: async ({ value }) => console.log('invalid', value)
});

// ... 

const formInstance = formFactory.useForm({
     onSubmit: ({ value }) => console.log('Submitted values', value);
});

// ...

<form onSubmit={e => {
    e.preventDefault();
    formInstance.handleSubmit();
})>
    {/* ... fields */}
    <button type="submit">Submit</button>
</form>

I can see how this might be useful in some cases, like if you want to split up a form with its input fields and what not, to manage just a portion of it in terms of UI. However I doubt this is intentional as there's no API to submit the formFactory which will in turn invoke its onSubmit function. So this is most likely a bug.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/vigorous-grass-55ky5f?file=%2Fsrc%2Findex.tsx%3A3%2C32

Steps to reproduce

1. Create a formFactory and provide onSubmit parameter

• const formFactory = createFormFactory({ onSubmit: () => console.log('form factory submit') });

2. Create an instance of that formFactory ALSO with onSubmit parameter

• const form = formFactory.useForm({ onSubmit: () => console.log('useForm submit') });

3. Call form.handleSubmit()
4. The expected form factory submit does not show up in the console logs

Expected behavior

When submitting I would expect to see two logs in the console:

1. useForm submit
2. form factory submit'
   in that order

but I only see useForm submit

How often does this bug happen?

Every time

Screenshots or Videos

/

Platform

OS: macOS
Browser: Chrome (latest)

TanStack Form adapter

react-form

TanStack Form version

0.19.2

TypeScript version

5.3.2

Additional context

No response

[Corbin Crutchley]

This is not a bug and is intended behavior. To implement things per your suggestion would be much more expensive on our end and is easily sidestepped by extracting the formFactory.onSubmit to a dedicated function which you call

[Darko Efremov]

This is not a bug and is intended behavior. To implement things per your suggestion would be much more expensive on our end and is easily sidestepped by extracting the formFactory.onSubmit to a dedicated function which you call

My understanding of the createFormFactory thingy was that all forms created by it will share state. They do not. This is no longer relevant. Thanks for the info, though. Things are even clearer now 🙏