Rollback Fix Modified click trigger on form elements prevent default behaviour

src/htmx.js

@@ -2425,8 +2425,6 @@ 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
       }
@@ -2435,9 +2433,7 @@ var htmx = (function() {
       if (elt.form && elt.type === 'submit') {
         return true
       }
-      elt = elt.closest('a')
-      // @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine
-      if (elt && elt.href &&
+      if (elt instanceof HTMLAnchorElement && elt.href &&
         (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
         return true
       }

test/core/internals.js

@@ -93,24 +93,8 @@ 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', 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)
-
-    // check elements inside links getting click events should cancel parent links
-    var anchorWithButton = make("<a href='/foo'><button></button></a>")
-    htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton).should.equal(true)
-    htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton.firstChild).should.equal(true)
+    htmx._('shouldCancel')({ type: 'submit' }, form).should.equal(true)
 
     form = make('<form id="f1">' +
         '<input id="insideInput" type="submit">' +

test/core/regressions.js

@@ -271,7 +271,8 @@ describe('Core htmx Regression Tests', function() {
     }, 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) {
+  // rolled back the fix for this so this fails now
+  it.skip('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>')
@@ -313,7 +314,8 @@ describe('Core htmx Regression Tests', function() {
     button.click()
   })
 
-  it('a htmx enabled button clicked inside a link will prevent the link from navigating on click', function(done) {
+  // rolled back the fix for this so this fails now
+  it.skip('a htmx enabled button clicked inside a link will prevent the link from navigating on click', function(done) {
     var defaultPrevented = 'unset'
     var link = make('<a href="/foo"><button hx-get="/foo">test</button></a>')
     var button = link.firstChild
@@ -333,4 +335,26 @@ describe('Core htmx Regression Tests', function() {
 
     button.click()
   })
+
+  it('a htmx enabled button containing sub elements will prevent the button submitting a form', function(done) {
+    var defaultPrevented = 'unset'
+    var form = make('<form><button hx-get="/foo"><span>test</span></button></form>')
+    var button = form.firstChild
+    var span = button.firstChild
+
+    htmx.on(button, 'click', function(evt) {
+      // we need to wait so the state of the evt is finalized
+      setTimeout(() => {
+        defaultPrevented = evt.defaultPrevented
+        try {
+          defaultPrevented.should.equal(true)
+          done()
+        } catch (err) {
+          done(err)
+        }
+      }, 0)
+    })
+
+    span.click()
+  })
 })