Cancel button with inner content form submit properly (#3368)

Co-authored-by: 1cg <[email protected]>

Author: MichaelWest22

src/htmx.js

@@ -2430,9 +2430,11 @@ var htmx = (function() {
       if (elt.tagName === 'FORM') {
         return true
       }
+      // find button wrapping the event elt
+      const btn = elt.closest('input[type="submit"], button')
       // @ts-ignore Do not cancel on buttons that 1) don't have a related form or 2) have a type attribute of 'reset'/'button'.
       // The properties will resolve to undefined for elements that don't define 'type' or 'form', which is fine
-      if (elt.form && elt.type === 'submit') {
+      if (btn && btn.form && btn.type === 'submit') {
         return true
       }
       elt = elt.closest('a')

test/core/regressions.js

@@ -363,4 +363,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()
+  })
+
 })