diff --git a/src/htmx.js b/src/htmx.js index 9e84a760a..b7f65b2aa 100644 --- a/src/htmx.js +++ b/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') diff --git a/test/core/regressions.js b/test/core/regressions.js index 72a825006..979b137b3 100644 --- a/test/core/regressions.js +++ b/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('
') + 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() + }) + })