[Bugfix] Fix hx-trigger changed modifier along from clause (#1571)

Fix hx-trigger changed modifier along from clause #1565
bigskysoftware · Jul 22, 2023 · 6d1adc8 · 6d1adc8
1 parent a29403f
commit 6d1adc8
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 5 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1411,9 +1411,12 @@ return (function () {
             } else {
                 eltsToListenOn = [elt];
             }
-            // store the initial value of the element so we can tell if it changes
+            // store the initial values of the elements, so we can tell if they change
             if (triggerSpec.changed) {
-                elementData.lastValue = elt.value;
+                eltsToListenOn.forEach(function (eltToListenOn) {
+                    var eltToListenOnData = getInternalData(eltToListenOn);
+                    eltToListenOnData.lastValue = eltToListenOn.value;
+                })
             }
             forEach(eltsToListenOn, function (eltToListenOn) {
                 var eventListener = function (evt) {
@@ -1453,11 +1456,11 @@ return (function () {
                             }
                         }
                         if (triggerSpec.changed) {
-                            if (elementData.lastValue === elt.value) {
+                            var eltToListenOnData = getInternalData(eltToListenOn)
+                            if (eltToListenOnData.lastValue === eltToListenOn.value) {
                                 return;
-                            } else {
-                                elementData.lastValue = elt.value;
                             }
+                            eltToListenOnData.lastValue = eltToListenOn.value
                         }
                         if (elementData.delayed) {
                             clearTimeout(elementData.delayed);

diff --git a/test/attributes/hx-trigger.js b/test/attributes/hx-trigger.js
@@ -42,6 +42,74 @@ describe("hx-trigger attribute", function(){
         div.innerHTML.should.equal("Requests: 1");
     });
 
+    it('changed modifier works along from clause with single input', function()
+    {
+        var requests = 0;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            requests++;
+            xhr.respond(200, {}, "Requests: " + requests);
+        });
+        var input = make('<input type="text"/>');
+        make('<div hx-trigger="click changed from:input" hx-target="#d1" hx-get="/test"></div>')
+        var div = make('<div id="d1"></div>');
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("");
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("");
+        input.value = "bar";
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+    });
+
+    it('changed modifier works along from clause with two inputs', function()
+    {
+        var requests = 0;
+        this.server.respondWith("GET", "/test", function (xhr) {
+            requests++;
+            xhr.respond(200, {}, "Requests: " + requests);
+        });
+        var input1 = make('<input type="text"/>');
+        var input2 = make('<input type="text"/>');
+        make('<div hx-trigger="click changed from:input" hx-target="#d1" hx-get="/test"></div>')
+        var div = make('<div id="d1"></div>');
+
+        input1.click();
+        this.server.respond();
+        div.innerHTML.should.equal("");
+        input2.click();
+        this.server.respond();
+        div.innerHTML.should.equal("");
+
+        input1.value = "bar";
+        input2.click();
+        this.server.respond();
+        div.innerHTML.should.equal("");
+        input1.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+
+        input1.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+        input2.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+
+        input2.value = "foo";
+        input1.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 1");
+        input2.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Requests: 2");
+    });
+
     it('once modifier works', function()
     {
         var requests = 0;