From 6939290b8f2820c95e99d5c69d0eac6b793027b9 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sun, 3 Jan 2021 08:04:26 -0700
Subject: [PATCH] support `closest` syntax in hx-indicator

---
 src/htmx.js                     |  7 ++++++-
 test/attributes/hx-indicator.js | 13 +++++++++++++
 www/attributes/hx-indicator.md  |  3 ++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index 459d011a..3e2aab52 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1482,7 +1482,12 @@ return (function () {
         function mutateRequestIndicatorClasses(elt, action) {
             var indicator = getClosestAttributeValue(elt, 'hx-indicator');
             if (indicator) {
-                var indicators = getDocument().querySelectorAll(indicator);
+                var indicators;
+                if (indicator.indexOf("closest ") === 0) {
+                    indicators = [closest(elt, indicator.substr(8))];
+                } else {
+                    indicators = getDocument().querySelectorAll(indicator);
+                }
             } else {
                 indicators = [elt];
             }
diff --git a/test/attributes/hx-indicator.js b/test/attributes/hx-indicator.js
index 1385eb42..e537fbed 100644
--- a/test/attributes/hx-indicator.js
+++ b/test/attributes/hx-indicator.js
@@ -49,4 +49,17 @@ describe("hx-indicator attribute", function(){
         a1.classList.contains("htmx-request").should.equal(false);
         a2.classList.contains("htmx-request").should.equal(false);
     });
+
+    it('allows closest syntax in hx-indicator', function()
+    {
+        this.server.respondWith("GET", "/test", "Clicked!");
+        var div = make('<div id="d1"><button id="b1" hx-get="/test" hx-indicator="closest div">Click Me!</button></div>')
+        var btn = byId("b1");
+        btn.click();
+        btn.classList.contains("htmx-request").should.equal(false);
+        div.classList.contains("htmx-request").should.equal(true);
+        this.server.respond();
+        btn.classList.contains("htmx-request").should.equal(false);
+        div.classList.contains("htmx-request").should.equal(false);
+    });
 })
diff --git a/www/attributes/hx-indicator.md b/www/attributes/hx-indicator.md
index a5d3018b..38f848a3 100644
--- a/www/attributes/hx-indicator.md
+++ b/www/attributes/hx-indicator.md
@@ -9,7 +9,8 @@ The `hx-indicator` attribute allows you to specify the element that will have th
 added to it for the duration of the request. This can be used to show spinners or progress indicators
 while the request is in flight.
 
-The value of this attribute is a CSS query selector of the element or elements to apply the class to.
+The value of this attribute is a CSS query selector of the element or elements to apply the class to,
+or the keyword `closest`, followed by a CSS selector, which will find the closest matching parent (e.g. `closest tr`);
 
 Here is an example with a spinner adjacent to the button: