remix-validated-form 4.5.4 → 4.5.5

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "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/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

@@ -8,6 +8,7 @@ import {
   ValidationResult,
   Validator,
 } from "../../validation/types";
+import { requestSubmit } from "../logic/requestSubmit";
 import { useControlledFieldStore } from "./controlledFieldStore";
 import { InternalFormId } from "./types";
 
@@ -206,7 +207,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),