pat inject: Fix formaction button injections with target self.

thet · thet · commit b8759467eecf · 2021-02-09T19:03:05.000+01:00
Fixes: quaive/ploneintranet.prototype#1164
diff --git a/CHANGES.md b/CHANGES.md
@@ -97,6 +97,7 @@
 
 ### Fixes
 
+-   pat inject: Fix formaction button injections with target ``self``. Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1164
 -   pat calendar: Fix language loading error "Error: Cannot find module './en.js'"
 -   pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes.
 -   pat checklist: Also dispatch standard ``change`` event when de/selecting all items.
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
@@ -193,7 +193,10 @@ const inject = {
         const $button = $(e.target);
         const formaction = $button.attr("formaction");
         const $form = $button.parents(".pat-inject").first();
-        const opts = { url: formaction };
+        const opts = {
+            url: formaction,
+            $formaction_button: $button,
+        };
         const $cfg_node = $button.closest("[data-pat-inject]");
         const cfgs = this.extractConfig($cfg_node, opts);
 
@@ -239,6 +242,15 @@ const inject = {
                 $el.parents("form").attr("action") ||
                 "";
 
+            if (
+                opts.$formaction_button &&
+                (cfg.target || "").startsWith("self")
+            ) {
+                // In case of button formaction submit with target ``self``,
+                // set it. Otherwise the ``form`` will be used as target.
+                cfg.$target = opts.$formaction_button;
+            }
+
             // separate selector from url
             const urlparts = cfg.url.split("#");
             cfg.url = urlparts[0];
@@ -311,9 +323,10 @@ const inject = {
          * cfg.$target.
          */
         // make sure target exist
-        if (cfg.target === "none")
+        if (cfg.target === "none") {
             // special case, we don't want to inject anything
             return true;
+        }
         cfg.$target =
             cfg.$target || (cfg.target === "self" ? $el : $(cfg.target));
         if (cfg.$target.length === 0) {
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
@@ -962,6 +962,43 @@ describe("pat-inject", function () {
                     expect($target1.html()).toBe("some");
                     expect($target2.html()).toBe("other");
                 });
+
+                it("formaction which replaces itself", async (done) => {
+                    answer(`
+                        <html>
+                            <body>
+                                <div id="someid">some</div>
+                                <div id="otherid">other</div>
+                            </body>
+                        </html>
+                    `);
+
+                    document.body.innerHTML = `
+                        <div id="oha">form inject target</div>
+                        <form
+                            class="pat-inject"
+                            data-pat-inject="target:#oha;source:#id1">
+                          <button
+                              type="submit"
+                              formaction="test.cgi"
+                              class="pat-inject"
+                              data-pat-inject="target:self::element;source:#otherid"
+                              />
+                        </form>
+                    `;
+
+                    pattern.init($("form"));
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    document.querySelector("form button").click();
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    expect(
+                        document.querySelector("form").innerHTML.trim()
+                    ).toBe("other");
+
+                    done();
+                });
             });
         });
     });
