make hx-on respect the hx-disable attribute

bigskysoftware · Apr 25, 2024 · b991f20 · b991f20
1 parent 3d099e7
commit b991f20
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1425,6 +1425,10 @@ return (function () {
  getRawAttribute(elt,'href').indexOf("#") !== 0;
  }
 
+ function eltIsDisabled(elt) {
+ return closest(elt, htmx.config.disableSelector);
+ }
+
  function boostElement(elt, nodeData, triggerSpecs) {
  if ((elt.tagName === "A" && isLocalLink(elt) && (elt.target === "" || elt.target === "_self")) || elt.tagName === "FORM") {
  nodeData.boosted = true;
@@ -1441,7 +1445,7 @@ return (function () {
  }
  triggerSpecs.forEach(function(triggerSpec) {
  addEventListener(elt, function(elt, evt) {
- if (closest(elt, htmx.config.disableSelector)) {
+ if (eltIsDisabled(elt)) {
  cleanUpElement(elt)
  return
  }
@@ -2053,6 +2057,9 @@ return (function () {
  if (!func) {
  func = new Function("event", code);
  }
+ if (eltIsDisabled(elt)) {
+ return;
+ }
  func.call(elt, e);
  });
  };

diff --git a/test/core/security.js b/test/core/security.js
@@ -106,6 +106,51 @@ describe("security options", function() {
  btn.innerHTML.should.equal("Clicked a second time");
  })
 
+ it("can disable hx-on on a single elt", function(){
+ var btn = make("<button hx-disable hx-on:click='window.foo = true'>Foo</button>");
+ btn.click();
+ should.equal(window.foo, undefined);
+ delete window.foo;
+ })
+
+
+ it("can disable hx-on on a parent elt", function(){
+ var div = make("<div hx-disable><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>");
+ var btn = byId("b1")
+ btn.click();
+ should.equal(window.foo, undefined);
+ delete window.foo;
+ })
+
+
+ it("can disable hx-on on a single elt dynamically", function(){
+ var btn = make("<button hx-on:click='window.foo = true'>Foo</button>");
+ btn.click();
+ should.equal(window.foo, true);
+ delete window.foo;
+
+ btn.setAttribute("hx-disable", "");
+
+ btn.click();
+ should.equal(window.foo, undefined);
+ delete window.foo;
+ })
+
+
+ it("can disable hx-on on a parent elt dynamically", function(){
+ var div = make("<div><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>");
+ var btn = byId("b1")
+ btn.click();
+ should.equal(window.foo, true);
+ delete window.foo;
+
+ div.setAttribute("hx-disable", "");
+
+ btn.click();
+ should.equal(window.foo, undefined);
+ delete window.foo;
+ })
+
  it("can make egress cross site requests when htmx.config.selfRequestsOnly is enabled", function(done){
  this.timeout(4000)
  // should trigger send error, rather than reject