Cancel vanilla submits from <button[form]/>. (#3072)

bigskysoftware · Dec 12, 2024 · cc2466b · cc2466b
1 parent a331244
commit cc2466b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -2400,7 +2400,8 @@ var htmx = (function() {
       if (elt.tagName === 'FORM') {
         return true
       }
-      if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
+      if (matches(elt, 'input[type="submit"], button') &&
+        (matches(elt, '[form]') || closest(elt, 'form') !== null)) {
         return true
       }
       if (elt instanceof HTMLAnchorElement && elt.href &&

diff --git a/test/core/internals.js b/test/core/internals.js
@@ -87,7 +87,7 @@ describe('Core htmx internals Tests', function() {
     var anchorThatShouldCancel = make("<a href='/foo'></a>")
     htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldCancel).should.equal(true)
 
-    var anchorThatShouldCancel = make("<a href='#'></a>")
+    anchorThatShouldCancel = make("<a href='#'></a>")
     htmx._('shouldCancel')({ type: 'click' }, anchorThatShouldCancel).should.equal(true)
 
     var anchorThatShouldNotCancel = make("<a href='#foo'></a>")
@@ -96,13 +96,19 @@ describe('Core htmx internals Tests', function() {
     var form = make('<form></form>')
     htmx._('shouldCancel')({ type: 'submit' }, form).should.equal(true)
 
-    var form = make("<form><input id='i1' type='submit'></form>")
+    form = make("<form><input id='i1' type='submit'></form>")
     var input = byId('i1')
     htmx._('shouldCancel')({ type: 'click' }, input).should.equal(true)
 
-    var form = make("<form><button id='b1' type='submit'></form>")
+    form = make("<form><button id='b1' type='submit'></form>")
     var button = byId('b1')
     htmx._('shouldCancel')({ type: 'click' }, button).should.equal(true)
+
+    form = make("<form id='f1'></form><input id='i1' form='f1' type='submit'><button id='b1' form='f1' type='submit'>")
+    input = byId('i1')
+    button = byId('b1')
+    htmx._('shouldCancel')({ type: 'click' }, input).should.equal(true)
+    htmx._('shouldCancel')({ type: 'click' }, button).should.equal(true)
   })
 
   it('unset properly unsets a given attribute', function() {