feat(pat inject): Support submit buttons with child elements.

Send the value of a submit button even if a child element of the submit button was clicked and not the submit button itself.
Patternslib · Nov 4, 2023 · 3821ca8 · 3821ca8
1 parent 981d71f
commit 3821ca8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/pat/ajax/ajax.js b/src/pat/ajax/ajax.js
@@ -4,6 +4,7 @@
  * Copyright 2012-2013 Florian Friesdorf
  * Copyright 2012-2013 Marko Durkovic
  */
+import "../../core/polyfills"; // SubmitEvent.submitter for Safari < 15.4 and jsDOM
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
@@ -53,8 +54,8 @@ const _ = {
         $el.off(".pat-ajax");
     },
     onClickSubmit(event) {
-        const el = event.target;
-        const form = el.closest("form");
+        const el = event.submitter || event.target;
+        const form = el.form;
         const data = {};
         if (el.name) {
             data[el.name] = el.value;

diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
@@ -107,25 +107,18 @@ const inject = {
                     if ($el[0]?.tagName === "FORM") {
                         events.add_event_listener(
                             $el[0],
-                            "click",
-                            "pat-inject--form-submit-click",
+                            "submit",
+                            "pat-inject--form-submit",
                             (e) => {
                                 if (
-                                    e.target.matches(
+                                    e.submitter?.matches(
                                         "[type=submit], button:not([type=button]), [type=image]"
                                     )
                                 ) {
                                     // make sure the submitting button is sent
                                     // with the form
                                     ajax.onClickSubmit(e);
                                 }
-                            }
-                        );
-                        events.add_event_listener(
-                            $el[0],
-                            "submit",
-                            "pat-inject--form-submit",
-                            (e) => {
                                 this.onTrigger(e);
                             }
                         );

diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
@@ -1026,6 +1026,28 @@ describe("pat-inject", function () {
                     expect(ajaxargs.data.get("submit")).toContain("label");
                 });
 
+                it("9.2.4.2 - pass submit button value in ajax call as data when clicked on a dom node within the submit button", async function () {
+                    document.body.innerHTML = `
+                    <form class="pat-inject" action="test.html#someid" method="post">
+                        <button name="submit" value="label">
+                            <span>label</span>
+                        </button>
+                    </form>
+                `;
+
+                    const form = document.querySelector("form");
+                    const label = document.querySelector("form button span");
+
+                    pattern.init($(form));
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    label.click();
+
+                    const ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
+                    expect($.ajax).toHaveBeenCalled();
+                    expect(ajaxargs.data.get("submit")).toContain("label");
+                });
+
                 it("9.2.4.3 - Sends submit button form values even if submit button is added after initialization.", async function () {
                     document.body.innerHTML = `
                         <form class="pat-inject" action="test.cgi">