Allow non-id selectors in hx-select-oob to fix #2561 (#2585)

* Allow non-id selectors in `hx-select-oob` to fix #2561 * Switch const to var * Fix test case for hx-select-oob
bigskysoftware · Oct 3, 2024 · 30ab5c1 · 30ab5c1
1 parent 7dd6cd7
commit 30ab5c1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -864,13 +864,12 @@ return (function () {
             if (oobSelects) {
                 var oobSelectValues = oobSelects.split(",");
                 for (var i = 0; i < oobSelectValues.length; i++) {
-                    var oobSelectValue = oobSelectValues[i].split(":", 2);
-                    var id = oobSelectValue[0].trim();
-                    if (id.indexOf("#") === 0) {
-                        id = id.substring(1);
-                    }
-                    var oobValue = oobSelectValue[1] || "true";
-                    var oobElement = fragment.querySelector("#" + id);
+                    var oobSelectValue = oobSelectValues[i]
+                    // Support colon in css selectors
+                    var colon = oobSelectValue.lastIndexOf(':')
+                    var split_at = colon == -1 ? oobSelectValue.length : colon
+                    var oobValue = oobSelectValue.substring(split_at + 1) || 'true'
+                    var oobElement = fragment.querySelector(oobSelectValue.substring(0, split_at))
                     if (oobElement) {
                         oobSwap(oobValue, oobElement, settleInfo);
                     }

diff --git a/test/attributes/hx-select-oob.js b/test/attributes/hx-select-oob.js
@@ -49,6 +49,38 @@ describe("hx-select-oob attribute", function () {
         div2.innerHTML.should.equal("");
     });
 
-
+  it('supports different swap styles', function()
+  {
+      this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><ul id='d2'><li>baz</li></ul>")
+      var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="#d2:beforeend"></div>')
+      make('<ul id="d2"><li>bar</li></ul>')
+      div.click()
+      this.server.respond()
+      div.innerHTML.should.equal('<div id="d1">foo</div>')
+      var list = byId('d2')
+      list.innerHTML.should.equal('<li>bar</li><li>baz</li>')
+  })
+  it('supports non-id selectors', function()
+  {
+      this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2' identifier='something-else'>bar</div>")
+      var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="div[identifier=\'something-else\']"></div>')
+      make('<div id="d2"></div>')
+      div.click()
+      this.server.respond()
+      div.innerHTML.should.equal('<div id="d1">foo</div>')
+      var div2 = byId('d2')
+      div2.innerHTML.should.equal('bar')
+  })
+  it('supports non-id selectors with colons', function()
+  {
+      this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div><div id='d3'>baz</div>")
+      var div = make('<div id="d4" hx-get="/test" hx-select="#d1" hx-select-oob="#d2:has(~ #d3):innerHTML"></div>')
+      make('<div id="d2"></div>')
+      div.click()
+      this.server.respond()
+      var div2 = byId('d2')
+      div2.innerHTML.should.equal('bar')
+      div.innerHTML.should.equal('<div id="d1">foo</div>')
+  })
 });