feat(react-form): correctly handle client-side validation with NextJS server-action

examples/react/next-server-actions/src/app/client-component.tsx

@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 import { mergeForm, useForm, useTransform } from '@tanstack/react-form'
-import { initialFormState } from '@tanstack/react-form/nextjs'
+import { initialFormState, useActionSubmit } from '@tanstack/react-form/nextjs'
 import { useStore } from '@tanstack/react-store'
 import someAction from './action'
 import { formOpts } from './shared-code'
@@ -18,10 +18,11 @@ export const ClientComp = () => {
     ),
   })
 
+  const onActionSubmit = useActionSubmit(form)
   const formErrors = useStore(form.store, (formState) => formState.errors)
 
   return (
-    <form action={action as never} onSubmit={() => form.handleSubmit()}>
+    <form action={action as never} onSubmit={onActionSubmit()}>
       {formErrors.map((error) => (
         <p key={error as unknown as string}>{error}</p>
       ))}

packages/react-form/src/nextjs/index.ts

@@ -3,3 +3,4 @@ export * from '@tanstack/form-core'
 export * from './createServerValidate'
 export * from './error'
 export * from './types'
+export * from './useActionSubmit'

packages/react-form/src/nextjs/useActionSubmit.ts

@@ -0,0 +1,33 @@
+import { useCallback, useRef } from 'react'
+import type { FormEventHandler } from 'react'
+import type { FormApi } from '@tanstack/form-core'
+
+export const useActionSubmit = <TSubmitMeta>(
+  form: FormApi<any, any, any, any, any, any, any, any, any, TSubmitMeta>,
+) => {
+  const isActionSubmittedRef = useRef(false)
+
+  const onActionSubmit = useCallback(
+    (submitMeta?: TSubmitMeta): FormEventHandler<HTMLFormElement> => {
+      return async (event) => {
+        if (isActionSubmittedRef.current) {
+          isActionSubmittedRef.current = false
+          return
+        }
+
+        event.preventDefault()
+
+        await new Promise((resolve) => setTimeout(resolve))
+        await (submitMeta ? form.handleSubmit(submitMeta) : form.handleSubmit())
+
+        if (form.state.isValid) {
+          isActionSubmittedRef.current = true
+          ;(event.target as HTMLFormElement).requestSubmit()
+        }
+      }
+    },
+    [form],
+  )
+
+  return onActionSubmit
+}