remix-validated-form 4.6.0-beta.0 → 4.6.0

package/dist/types/internal/logic/requestSubmit.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Ponyfill of the HTMLFormElement.requestSubmit() method.
+ * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
+ */
+export declare const requestSubmit: (element: HTMLFormElement, submitter?: HTMLElement | undefined) => void;

package/dist/types/internal/state/fieldArray.d.ts

@@ -25,4 +25,4 @@ export declare type FieldArrayProps = {
     formId?: string;
     validationBehavior?: FieldArrayValidationBehaviorOptions;
 };
-export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => React.ReactNode;
+export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.6.0-beta.0",
+  "version": "4.6.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@remix-run/react": "^1.6.5",
+    "@testing-library/react": "^13.3.0",
     "@types/lodash": "^4.14.178",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -1,4 +1,9 @@
-import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
+import {
+  Form as RemixForm,
+  FormMethod,
+  useFetcher,
+  useSubmit,
+} from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -301,10 +306,16 @@ export function ValidatedForm<DataType>({
     nativeEvent: HTMLSubmitEvent["nativeEvent"]
   ) => {
     startSubmit();
-    const result = await validator.validate(getDataFromForm(e.currentTarget));
+    const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
+    const formDataToValidate = getDataFromForm(e.currentTarget);
+    if (submitter?.name) {
+      formDataToValidate.append(submitter.name, submitter.value);
+    }
+
+    const result = await validator.validate(formDataToValidate);
     if (result.error) {
-      endSubmit();
       setFieldErrors(result.error.fieldErrors);
+      endSubmit();
       if (!disableFocusOnError) {
         focusFirstInvalidInput(
           result.error.fieldErrors,
@@ -313,6 +324,7 @@ export function ValidatedForm<DataType>({
         );
       }
     } else {
+      setFieldErrors({});
       const eventProxy = formEventProxy(e);
       await onSubmit?.(result.data, eventProxy);
       if (eventProxy.defaultPrevented) {
@@ -320,15 +332,17 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
-
       // We deviate from the remix code here a bit because of our async submit.
       // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
       // but we already have the form in `formRef.current` so we can just use that.
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
       if (fetcher) fetcher.submit(submitter || e.currentTarget);
-      else submit(submitter || target, { replace });
+      else
+        submit(submitter || target, {
+          replace,
+          method: (submitter?.formMethod as FormMethod) || method,
+        });
     }
   };
 

package/src/internal/logic/requestSubmit.test.tsx

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react";
+import React, { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { requestSubmit } from "./requestSubmit";
+
+describe("requestSubmit polyfill", () => {
+  it("should polyfill requestSubmit", () => {
+    const submit = vi.fn();
+    const ref = createRef<HTMLFormElement>();
+    render(
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+        ref={ref}
+      >
+        <input name="test" value="testing" />
+      </form>
+    );
+    requestSubmit(ref.current!);
+    expect(submit).toHaveBeenCalledTimes(1);
+  });
+});

package/src/internal/logic/requestSubmit.ts

@@ -0,0 +1,103 @@
+/**
+ * Ponyfill of the HTMLFormElement.requestSubmit() method.
+ * Based on polyfill from: https://github.com/javan/form-request-submit-polyfill/blob/main/form-request-submit-polyfill.js
+ */
+export const requestSubmit = (
+  element: HTMLFormElement,
+  submitter?: HTMLElement
+) => {
+  // In vitest, let's test the polyfill.
+  // Cypress will test the native implementation by nature of using chrome.
+  if (
+    typeof Object.getPrototypeOf(element).requestSubmit === "function" &&
+    !import.meta.vitest
+  ) {
+    element.requestSubmit(submitter);
+    return;
+  }
+
+  if (submitter) {
+    validateSubmitter(element, submitter);
+    submitter.click();
+    return;
+  }
+
+  const dummySubmitter = document.createElement("input");
+  dummySubmitter.type = "submit";
+  dummySubmitter.hidden = true;
+  element.appendChild(dummySubmitter);
+  dummySubmitter.click();
+  element.removeChild(dummySubmitter);
+};
+
+function validateSubmitter(element: HTMLFormElement, submitter: HTMLElement) {
+  // Should be redundant, but here for completeness
+  const isHtmlElement = submitter instanceof HTMLElement;
+  if (!isHtmlElement) {
+    raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+  }
+
+  const hasSubmitType =
+    "type" in submitter && (submitter as HTMLInputElement).type === "submit";
+  if (!hasSubmitType)
+    raise(TypeError, "The specified element is not a submit button");
+
+  const isForCorrectForm =
+    "form" in submitter && (submitter as HTMLInputElement).form === element;
+  if (!isForCorrectForm)
+    raise(
+      DOMException,
+      "The specified element is not owned by this form element",
+      "NotFoundError"
+    );
+}
+
+interface ErrorConstructor {
+  new (message: string, name?: string): Error;
+}
+
+function raise(
+  errorConstructor: ErrorConstructor,
+  message: string,
+  name?: string
+): never {
+  throw new errorConstructor(
+    "Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".",
+    name
+  );
+}
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it("should validate the submitter", () => {
+    const form = document.createElement("form");
+    document.body.appendChild(form);
+
+    const submitter = document.createElement("input");
+    expect(() => validateSubmitter(null as any, null as any)).toThrow();
+    expect(() => validateSubmitter(form, null as any)).toThrow();
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+    expect(() =>
+      validateSubmitter(form, document.createElement("div"))
+    ).toThrow();
+
+    submitter.type = "submit";
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+
+    form.appendChild(submitter);
+    expect(() => validateSubmitter(form, submitter)).not.toThrow();
+
+    form.removeChild(submitter);
+    expect(() => validateSubmitter(form, submitter)).toThrow();
+
+    document.body.appendChild(submitter);
+    form.id = "test-form";
+    submitter.setAttribute("form", "test-form");
+    expect(() => validateSubmitter(form, submitter)).not.toThrow();
+
+    const button = document.createElement("button");
+    button.type = "submit";
+    form.appendChild(button);
+    expect(() => validateSubmitter(form, button)).not.toThrow();
+  });
+}

package/src/internal/state/createFormStore.ts

@@ -10,7 +10,9 @@ import {
   ValidationResult,
   Validator,
 } from "../../validation/types";
+import { requestSubmit } from "../logic/requestSubmit";
 import * as arrayUtil from "./arrayUtil";
+import { useControlledFieldStore } from "./controlledFieldStore";
 import { InternalFormId } from "./types";
 
 export type SyncedFormProps = {
@@ -264,7 +266,7 @@ const createFormState = (
       "Cannot find reference to form. This is probably a bug in remix-validated-form."
     );
 
-    formElement.requestSubmit();
+    requestSubmit(formElement);
   },
 
   getValues: () => new FormData(get().formElement ?? undefined),

package/src/internal/state/fieldArray.tsx

@@ -151,5 +151,5 @@ export const FieldArray = ({
     name,
     validationBehavior
   );
-  return children(value, helpers, error);
+  return <>{children(value, helpers, error)}</>;
 };

package/src/validation/createValidator.ts

@@ -1,3 +1,4 @@
+import omit from "lodash/omit";
 import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
@@ -10,6 +11,9 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
   return objectFromPathEntries(Object.entries(data));
 };
 
+const omitInternalFields = (data: GenericObject): GenericObject =>
+  omit(data, FORM_ID_FIELD);
+
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
@@ -21,7 +25,7 @@ export function createValidator<T>(
   return {
     validate: async (value) => {
       const data = preprocessFormData(value);
-      const result = await validator.validate(data);
+      const result = await validator.validate(omitInternalFields(data));
 
       if (result.error) {
         return {

package/src/validation/validation.test.ts

@@ -1,11 +1,13 @@
 import { anyString, TestFormData } from "@remix-validated-form/test-utils";
 import { withYup } from "@remix-validated-form/with-yup/src";
 import { withZod } from "@remix-validated-form/with-zod";
+import omit from "lodash/omit";
 import { Validator } from "remix-validated-form/src";
 import { objectFromPathEntries } from "remix-validated-form/src/internal/flatten";
 import { describe, it, expect } from "vitest";
 import * as yup from "yup";
 import { z } from "zod";
+import { FORM_ID_FIELD } from "../internal/constants";
 
 // If adding an adapter, write a validator that validates this shape
 type Person = {
@@ -101,6 +103,30 @@ describe("Validation", () => {
         });
       });
 
+      it("should omit internal fields", async () => {
+        const person: Person = {
+          firstName: "John",
+          lastName: "Doe",
+          age: 30,
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+
+          // @ts-expect-error
+          // internal filed technically not part of person type
+          [FORM_ID_FIELD]: "something",
+        };
+        expect(await validator.validate(person)).toEqual({
+          data: omit(person, FORM_ID_FIELD),
+          error: undefined,
+          submittedData: person,
+          formId: "something",
+        });
+      });
+
       it("should return field errors when invalid", async () => {
         const obj = { age: "hi!", pets: [{ animal: "dog" }] };
         expect(await validator.validate(obj)).toEqual({