Fix Modified click trigger on form elements prevent default behaviour (#3336)

Fix Modified click trigger on form elements prevent default behaviour of clicked element

Author: MichaelWest22

src/htmx.js

@@ -2425,6 +2425,8 @@ var htmx = (function() {
    */
   function shouldCancel(evt, elt) {
     if (evt.type === 'submit' || evt.type === 'click') {
+      // use elt from event that was submitted/clicked where possible to determining if default form/link behavior should be canceled
+      elt = asElement(evt.target) || elt
       if (elt.tagName === 'FORM') {
         return true
       }

test/core/internals.js

@@ -93,8 +93,19 @@ describe('Core htmx internals Tests', function() {
     var anchorThatShouldNotCancel = make("<a href='#foo'></a>")
     htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldNotCancel).should.equal(false)
 
+    var divThatShouldNotCancel = make('<div></div>')
+    htmx._('shouldCancel')({ type: 'click' }, divThatShouldNotCancel).should.equal(false)
+
     var form = make('<form></form>')
-    htmx._('shouldCancel')({ type: 'submit' }, form).should.equal(true)
+    htmx._('shouldCancel')({ type: 'submit', target: form }, form).should.equal(true)
+    htmx._('shouldCancel')({ type: 'click', target: form }, form).should.equal(true)
+
+    // falls back to check elt tag when target is not an element
+    htmx._('shouldCancel')({ type: 'click', target: null }, form).should.equal(true)
+
+    // check that events targeting elements that shouldn't cancel don't cancel
+    htmx._('shouldCancel')({ type: 'submit', target: anchorThatShouldNotCancel }, form).should.equal(false)
+    htmx._('shouldCancel')({ type: 'click', target: divThatShouldNotCancel }, form).should.equal(false)
 
     form = make('<form id="f1">' +
         '<input id="insideInput" type="submit">' +

test/core/regressions.js

@@ -270,4 +270,25 @@ describe('Core htmx Regression Tests', function() {
       done()
     }, 50)
   })
+
+  it('a modified click trigger on a form does not prevent the default behaviour of other elements - https://github.com/bigskysoftware/htmx/issues/2755', function(done) {
+    var defaultPrevented = 'unset'
+    make('<input type="date" id="datefield">')
+    make('<form hx-trigger="click from:body"></form>')
+
+    htmx.on('#datefield', 'click', function(evt) {
+      // we need to wait so the state of the evt is finalized
+      setTimeout(() => {
+        defaultPrevented = evt.defaultPrevented
+        try {
+          defaultPrevented.should.equal(false)
+          done()
+        } catch (err) {
+          done(err)
+        }
+      }, 0)
+    })
+
+    byId('datefield').click()
+  })
 })