Escape OOB query selector

Escape OOB query selector to support special characters in element ids. Refs bigskysoftware#1537
imankulov · Oct 6, 2023 · 0618b20 · 0618b20
1 parent 590fdda
commit 0618b20
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/htmx.js b/src/htmx.js
@@ -773,7 +773,7 @@ return (function () {
          * @returns
          */
         function oobSwap(oobValue, oobElement, settleInfo) {
-            var selector = "#" + getRawAttribute(oobElement, "id");
+            var selector = "#" + CSS.escape(getRawAttribute(oobElement, "id"));
             var swapStyle = "outerHTML";
             if (oobValue === "true") {
                 // do nothing

diff --git a/test/attributes/hx-swap-oob.js b/test/attributes/hx-swap-oob.js
@@ -18,6 +18,16 @@ describe("hx-swap-oob attribute", function () {
         byId("d1").innerHTML.should.equal("Swapped0");
     })
 
+    it('handles special characters in id properly', function () {
+        this.server.respondWith("GET", "/test", "Clicked<div id='special-chars/.:,!' hx-swap-oob='true'>SwappedSpecialChars</div>");
+        var div = make('<div hx-get="/test">click me</div>');
+        make('<div id="special-chars/.:,!"></div>');
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked");
+        byId("special-chars/.:,!").innerHTML.should.equal("SwappedSpecialChars");
+    })
+
     it('handles more than one oob swap properly', function () {
         this.server.respondWith("GET", "/test", "Clicked<div id='d1' hx-swap-oob='true'>Swapped1</div><div id='d2' hx-swap-oob='true'>Swapped2</div>");
         var div = make('<div hx-get="/test">click me</div>');