Merge pull request #234 from seasonedcc/fetcher-with-other-form

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