Merge remote-tracking branch 'origin/master' into dev

bigskysoftware · Jul 14, 2023 · 1837f1f · 1837f1f
2 parents ec0c11c + 3521c3c
commit 1837f1f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1010,8 +1010,8 @@ return (function () {
             }
         }
 
-        function maybeSelectFromResponse(elt, fragment) {
-            var selector = getClosestAttributeValue(elt, "hx-select");
+        function maybeSelectFromResponse(elt, fragment, selectOverride) {
+            var selector = selectOverride || getClosestAttributeValue(elt, "hx-select");
             if (selector) {
                 var newFragment = getDocument().createDocumentFragment();
                 forEach(fragment.querySelectorAll(selector), function (node) {
@@ -1085,12 +1085,12 @@ return (function () {
             }
         }
 
-        function selectAndSwap(swapStyle, target, elt, responseText, settleInfo) {
+        function selectAndSwap(swapStyle, target, elt, responseText, settleInfo, selectOverride) {
             settleInfo.title = findTitle(responseText);
             var fragment = makeFragment(responseText);
             if (fragment) {
                 handleOutOfBandSwaps(elt, fragment, settleInfo);
-                fragment = maybeSelectFromResponse(elt, fragment);
+                fragment = maybeSelectFromResponse(elt, fragment, selectOverride);
                 handlePreservedElements(fragment);
                 return swap(swapStyle, elt, target, fragment, settleInfo);
             }
@@ -3325,8 +3325,13 @@ return (function () {
                             // safari issue - see https://github.com/microsoft/playwright/issues/5894
                         }
 
+                        var selectOverride;
+                        if (hasHeader(xhr, /HX-Reselect:/i)) {
+                            selectOverride = xhr.getResponseHeader("HX-Reselect");
+                        }
+
                         var settleInfo = makeSettleInfo(target);
-                        selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo);
+                        selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo, selectOverride);
 
                         if (selectionInfo.elt &&
                             !bodyContains(selectionInfo.elt) &&

diff --git a/test/core/headers.js b/test/core/headers.js
@@ -188,6 +188,16 @@ describe("Core htmx AJAX headers", function () {
         div1.innerHTML.should.equal("Result");
     })
 
+    it("should handle HX-Reselect", function () {
+        this.server.respondWith("GET", "/test", [200, {"HX-Reselect": "#d2"}, "<div id='d1'>foo</div><div id='d2'>bar</div>"]);
+
+        var div = make('<div hx-get="/test" hx-select="#d1"></div>');
+        div.click();
+        this.server.respond();
+
+        div.innerHTML.should.equal('<div id="d2">bar</div>');
+    });
+
     it("should handle simple string HX-Trigger-After-Swap response header properly w/ outerHTML swap", function () {
         this.server.respondWith("GET", "/test", [200, {"HX-Trigger-After-Swap": "foo"}, ""]);
 

diff --git a/www/content/reference.md b/www/content/reference.md
@@ -117,6 +117,7 @@ The table below lists all other attributes available in htmx.
 | [`HX-Replace-Url`](@/headers/hx-replace-url.md)      | replaces the current URL in the location bar
 | `HX-Reswap`                                          | Allows you to specify how the response will be swapped. See [hx-swap](@/attributes/hx-swap.md) for possible values
 | `HX-Retarget`                                        | A CSS selector that updates the target of the content update to a different element on the page
+| `HX-Reselect`                                        | A CSS selector that allows you to choose which part of the response is used to be swapped in. Overrides an existing [`hx-select`](@/attributes/hx-select.md) on the triggering element
 | [`HX-Trigger`](@/headers/hx-trigger.md)              | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info
 | [`HX-Trigger-After-Settle`](@/headers/hx-trigger.md) | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info
 | [`HX-Trigger-After-Swap`](@/headers/hx-trigger.md)   | allows you to trigger client side events, see the [documentation](@/headers/hx-trigger.md) for more info