Merge pull request #267 from haines/handle-non-object-loader-data

Handle non-object loader data in `useDefaultValuesFromLoader`

apps/test-app/app/routes/non-object-loader-data.tsx

@@ -0,0 +1,28 @@
+import { json, DataFunctionArgs } from "@remix-run/node";
+import { withZod } from "@remix-validated-form/with-zod";
+import { ValidatedForm } from "remix-validated-form";
+import { zfd } from "zod-form-data";
+import { Input } from "~/components/Input";
+import { SubmitButton } from "~/components/SubmitButton";
+
+const validator = withZod(
+  zfd.formData({
+    text1: zfd.text(),
+  })
+);
+
+export type LoaderData = string;
+
+export const loader = (args: DataFunctionArgs) =>
+  json<LoaderData>("Hello, world");
+
+export default function FrontendValidation() {
+  return (
+    <>
+      <ValidatedForm validator={validator} method="post" id="test-form">
+        <Input name="text1" type="text" label="Text" />
+        <SubmitButton />
+      </ValidatedForm>
+    </>
+  );
+}

apps/test-app/cypress/integration/default-values.ts

@@ -98,4 +98,9 @@ describe("Validation", () => {
       '"defaultChecked": false'
     );
   });
+
+  it("should not fail when encountering non-object loader data", () => {
+    cy.visit("/non-object-loader-data").waitForJs();
+    cy.findByLabelText("Text").should("have.value", "");
+  });
 });

packages/remix-validated-form/src/internal/hooks.ts

@@ -67,7 +67,10 @@ export const useDefaultValuesFromLoader = ({
     // we should use the data from the deepest route.
     const match = matches
       .reverse()
-      .find((match) => match.data && dataKey in match.data);
+      .find(
+        (match) =>
+          match.data && typeof match.data === "object" && dataKey in match.data
+      );
     return match?.data[dataKey];
   }