Merge pull request #136 from SeasonedSoftware/imperative-submit

Imperative submit

apps/web/app/routes/examples.tsx

@@ -100,6 +100,9 @@ export default function Component() {
           <SidebarLayout.NavLink to={'/examples/forms/multiple-forms'}>
             Multiple forms
           </SidebarLayout.NavLink>
+          <SidebarLayout.NavLink to={'/examples/forms/imperative-submit'}>
+            Imperative submit
+          </SidebarLayout.NavLink>
           <SidebarLayout.NavTitle>renderField</SidebarLayout.NavTitle>
           <SidebarLayout.NavLink
             to={'/examples/render-field/required-indicator'}

apps/web/app/routes/examples/forms/imperative-submit.tsx

@@ -0,0 +1,70 @@
+import hljs from 'highlight.js/lib/common'
+import type {
+  ActionFunction,
+  LoaderFunction,
+  MetaFunction,
+} from '@remix-run/node'
+import { formAction } from '~/formAction'
+import { z } from 'zod'
+import Form from '~/ui/form'
+import { metaTags } from '~/helpers'
+import { makeDomainFunction } from 'domain-functions'
+import Example from '~/ui/example'
+
+const title = 'Imperative submit'
+const description =
+  'In this example, we trigger a submit as soon as the user enters 4 characters.'
+
+export const meta: MetaFunction = () => metaTags({ title, description })
+
+const code = `const schema = z.object({ token: z.string().length(4) })
+
+export default () => (
+  <Form schema={schema}>
+    {({ Field, Errors, submit }) => (
+      <>
+        <Field
+          name="token"
+          onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+            if (ev.target.value.length === 4) submit()
+          }}
+        />
+        <Errors />
+      </>
+    )}
+  </Form>
+)`
+
+const schema = z.object({
+  token: z.string().length(4),
+})
+
+export const loader: LoaderFunction = () => ({
+  code: hljs.highlight(code, { language: 'ts' }).value,
+})
+
+const mutation = makeDomainFunction(schema)(async (values) => values)
+
+export const action: ActionFunction = async ({ request }) =>
+  formAction({ request, schema, mutation })
+
+export default function Component() {
+  return (
+    <Example title={title} description={description}>
+      <Form schema={schema}>
+        {({ Field, Errors, submit }) => (
+          <>
+            <Field
+              name="token"
+              placeholder="Type 4 digits"
+              onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
+                if (ev.target.value.length === 4) submit()
+              }}
+            />
+            <Errors />
+          </>
+        )}
+      </Form>
+    </Example>
+  )
+}

apps/web/tests/examples/forms/imperative-submit.spec.ts

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test'
+import { test } from 'tests/setup/tests'
+
+const route = '/examples/forms/imperative-submit'
+
+test('With JS enabled', async ({ example }) => {
+  const { page } = example
+  const token = example.field('token')
+
+  await page.goto(route)
+
+  await token.input.first().type('123')
+  expect(page.locator('#action-data > pre')).toBeHidden()
+
+  await token.input.first().type('4')
+
+  await example.expectData({
+    token: '1234',
+  })
+})

packages/remix-forms/src/createForm.tsx

@@ -42,7 +42,9 @@ type BaseFormProps = {
 type BaseFormPropsWithHTMLAttributes =
   React.FormHTMLAttributes<HTMLFormElement> & BaseFormProps
 
-type FormComponent = React.ForwardRefExoticComponent<BaseFormProps>
+type FormComponent = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<BaseFormProps> & React.RefAttributes<HTMLFormElement>
+>
 
 type Field<SchemaType> = {
   shape: ZodTypeAny
@@ -77,6 +79,7 @@ type Children<Schema extends SomeZodObject> = (
     Errors: ComponentOrTagName<'div'>
     Error: ComponentOrTagName<'div'>
     Button: ComponentOrTagName<'button'>
+    submit: () => void
   } & UseFormReturn<z.infer<Schema>, any>,
 ) => React.ReactNode
 
@@ -226,6 +229,13 @@ function createForm({
       form.handleSubmit(() => submit(event.target))(event)
     }
 
+    const formRef = React.useRef<HTMLFormElement>(null)
+    const doSubmit = () => {
+      formRef.current?.dispatchEvent(
+        new Event('submit', { cancelable: true, bubbles: true }),
+      )
+    }
+
     const Field = React.useMemo(
       () =>
         createField<ObjectFromSchema<Schema>>({
@@ -336,6 +346,7 @@ function createForm({
         Errors,
         Error,
         Button,
+        submit: doSubmit,
         ...form,
       }),
       (child) => {
@@ -460,7 +471,7 @@ function createForm({
 
     return (
       <FormProvider {...form}>
-        <Component method={method} onSubmit={onSubmit} {...props}>
+        <Component ref={formRef} method={method} onSubmit={onSubmit} {...props}>
           {beforeChildren}
           {customChildren ?? defaultChildren()}
         </Component>