Ensure action data errors are not shown in fetcher forms

apps/web/app/routes/test-examples/fetcher-with-other-forms-error.tsx

@@ -0,0 +1,49 @@
+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'
+import { useFetcher } from '@remix-run/react'
+
+const title = "Fetcher with other form's error"
+const description =
+  'In this example, we ensure that errors in action data are not show in forms with fetcher.'
+
+export const meta: MetaFunction = () => metaTags({ title, description })
+
+const schema = z.object({
+  field: z.string(),
+})
+
+const fetcherSchema = z.object({
+  fetcherField: z.string(),
+})
+
+export const loader: LoaderFunction = () => ({
+  code: hljs.highlight('', { language: 'ts' }).value,
+})
+
+const mutation = makeDomainFunction(schema)(async () => {
+  throw new Error('This error should not show inside the fetcher form')
+})
+
+export const action: ActionFunction = async ({ request }) =>
+  formAction({ request, schema, mutation })
+
+export default function Component() {
+  const fetcher = useFetcher()
+
+  return (
+    <Example title={title} description={description}>
+      <Form schema={schema} id="form" />
+      <Form schema={fetcherSchema} fetcher={fetcher} id="fetcher-form" />
+    </Example>
+  )
+}

apps/web/tests/examples/forms/fetcher-with-other-forms-error.spec.ts

@@ -0,0 +1,49 @@
+import { test, testWithoutJS, expect } from 'tests/setup/tests'
+
+const route = '/test-examples/fetcher-with-other-forms-error'
+
+test('With JS enabled', async ({ example }) => {
+  const { page } = example
+  await page.goto(route)
+
+  const button = page.locator('#form button:has-text("OK"):visible')
+
+  // Render
+  await expect(button).toBeEnabled()
+
+  // Client-side validation
+  await button.click()
+
+  // Show field errors and focus on the first field
+
+  await expect(page.locator('#form > div[role="alert"]:visible')).toHaveText(
+    'This error should not show inside the fetcher form',
+  )
+
+  expect(
+    await page.locator('#fetcher-form > div[role="alert"]:visible').count(),
+  ).toEqual(0)
+})
+
+testWithoutJS('With JS disabled', async ({ example }) => {
+  const { page } = example
+  await page.goto(route)
+
+  const button = page.locator('#form button:has-text("OK"):visible')
+
+  // Render
+  await expect(button).toBeEnabled()
+
+  // Client-side validation
+  await button.click()
+
+  // Show field errors and focus on the first field
+
+  await expect(page.locator('#form > div[role="alert"]:visible')).toHaveText(
+    'This error should not show inside the fetcher form',
+  )
+
+  expect(
+    await page.locator('#fetcher-form > div[role="alert"]:visible').count(),
+  ).toEqual(0)
+})

packages/remix-forms/src/createForm.tsx

@@ -253,7 +253,7 @@ function createForm({
     const navigationTransition = useNavigation()
     const transition = fetcher ?? navigationTransition
     const navigationActionData = useActionData()
-    const unparsedActionData = fetcher?.data ?? navigationActionData
+    const unparsedActionData = fetcher ? fetcher.data : navigationActionData
 
     const actionData =
       parseActionData && unparsedActionData