Change hx-trigger's changed modifier to work for independent trigger specifications (#2891)

* Adjust hx-trigger's changed modifier for multiple sources

The `changed` trigger modifier can see different event targets, either due
to the `from` modifier or event bubbling. The existing behavior trigger
only for one node (`from` modifier) or inconsistently (bubbling).

Use a nested weak map to keep track of the last value per distinguished
(trigger specification, event target node) pair. The weak map ensures
that Garbage Collection can still recycle the nodes.

If a event target was not seen via `from`, it is assumed changed for the
first time the trigger is hit.

* Add test case for separate triggers with changed modifier

Author: jsonn

src/htmx.js

@@ -695,7 +695,7 @@ var htmx = (function() {
    * @property {boolean} [triggeredOnce]
    * @property {number} [delayed]
    * @property {number|null} [throttle]
-   * @property {string} [lastValue]
+   * @property {WeakMap<HtmxTriggerSpecification,WeakMap<EventTarget,string>>} [lastValue]
    * @property {boolean} [loaded]
    * @property {string} [path]
    * @property {string} [verb]
@@ -2417,10 +2417,15 @@ var htmx = (function() {
     }
     // store the initial values of the elements, so we can tell if they change
     if (triggerSpec.changed) {
+      if (!('lastValue' in elementData)) {
+        elementData.lastValue = new WeakMap()
+      }
       eltsToListenOn.forEach(function(eltToListenOn) {
-        const eltToListenOnData = getInternalData(eltToListenOn)
+        if (!elementData.lastValue.has(triggerSpec)) {
+          elementData.lastValue.set(triggerSpec, new WeakMap())
+        }
         // @ts-ignore value will be undefined for non-input elements, which is fine
-        eltToListenOnData.lastValue = eltToListenOn.value
+        elementData.lastValue.get(triggerSpec).set(eltToListenOn, eltToListenOn.value)
       })
     }
     forEach(eltsToListenOn, function(eltToListenOn) {
@@ -2462,13 +2467,14 @@ var htmx = (function() {
             }
           }
           if (triggerSpec.changed) {
-            const eltToListenOnData = getInternalData(eltToListenOn)
+            const node = event.target
             // @ts-ignore value will be undefined for non-input elements, which is fine
-            const value = eltToListenOn.value
-            if (eltToListenOnData.lastValue === value) {
+            const value = node.value
+            const lastValue = elementData.lastValue.get(triggerSpec)
+            if (lastValue.has(node) && lastValue.get(node) === value) {
               return
             }
-            eltToListenOnData.lastValue = value
+            lastValue.set(node, value)
           }
           if (elementData.delayed) {
             clearTimeout(elementData.delayed)
@@ -2846,12 +2852,6 @@ var htmx = (function() {
 
       triggerEvent(elt, 'htmx:beforeProcessNode')
 
-      // @ts-ignore value will be undefined for non-input elements, which is fine
-      if (elt.value) {
-        // @ts-ignore
-        nodeData.lastValue = elt.value
-      }
-
       const triggerSpecs = getTriggerSpecs(elt)
       const hasExplicitHttpAction = processVerbs(elt, nodeData, triggerSpecs)
 

test/attributes/hx-trigger.js

@@ -64,6 +64,7 @@ describe('hx-trigger attribute', function() {
     div.innerHTML.should.equal('Requests: 1')
   })
 
+  // This test and the next one should be kept in sync.
   it('changed modifier works along from clause with two inputs', function() {
     var requests = 0
     this.server.respondWith('GET', '/test', function(xhr) {
@@ -106,6 +107,92 @@ describe('hx-trigger attribute', function() {
     div.innerHTML.should.equal('Requests: 2')
   })
 
+  // This test and the previous one should be kept in sync.
+  it('changed modifier counts each triggerspec separately', 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>')
+    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: 2')
+
+    input1.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Requests: 2')
+    input2.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Requests: 2')
+
+    input2.value = 'foo'
+    input1.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Requests: 2')
+    input2.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Requests: 4')
+  })
+
+  it('separate 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:nth-child(1), click changed from:input:nth-child(2)" 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
     this.server.respondWith('GET', '/test', function(xhr) {