From 7755aa841b395579894c576d978b0d21cf5a91ce Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 22 Sep 2022 11:22:41 +0200
Subject: [PATCH] feat(pat forward): Do not steal the click event.

When a pat-forward element is clicked, allow to propagate the click event so that other handlers can also react.
Fixes: https://github.com/Patternslib/Patterns/issues/1063
---
 src/pat/forward/forward.js      |  1 -
 src/pat/forward/forward.test.js | 38 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/pat/forward/forward.js b/src/pat/forward/forward.js
index 8259052f7..d0fcf6d1c 100644
--- a/src/pat/forward/forward.js
+++ b/src/pat/forward/forward.js
@@ -34,7 +34,6 @@ export default Base.extend({
             return;
         }
         event.preventDefault();
-        event.stopPropagation();
         if (this.options.delay) {
             await utils.timeout(this.options.delay);
         }
diff --git a/src/pat/forward/forward.test.js b/src/pat/forward/forward.test.js
index e8b59a0ca..45eb20b40 100644
--- a/src/pat/forward/forward.test.js
+++ b/src/pat/forward/forward.test.js
@@ -124,5 +124,43 @@ describe("pat-forward", function () {
             await utils.timeout(300);
             expect(window.location.href.indexOf("#oh") > -1).toBe(true);
         });
+
+        it("does not steal the click event but let it bubble up.", function () {
+            document.body.innerHTML = `
+
+                <div class="pat-forward" data-pat-forward="#target1">
+                  <button class="pat-forward" type="button" data-pat-forward="#target2">Button 2</button>
+                </div>
+
+                <div id="target1">Target 1</div>
+                <div id="target2">Target 2</div>
+            `;
+
+            const source1 = document.querySelector("div.pat-forward");
+            const source2 = document.querySelector("button.pat-forward");
+
+            const target1 = document.querySelector("#target1");
+            const target2 = document.querySelector("#target2");
+
+            let target1_clicks = 0;
+            target1.addEventListener("click", () => {
+                target1_clicks++;
+            });
+
+            let target2_clicks = 0;
+            target2.addEventListener("click", () => {
+                target2_clicks++;
+            });
+
+            new pattern(source1);
+            new pattern(source2);
+
+            source1.click();
+            expect(target1_clicks).toBe(1);
+
+            source2.click();
+            expect(target2_clicks).toBe(1);
+            expect(target1_clicks).toBe(2);
+        });
     });
 });