Merge pull request #354 from andyhorng/fix-morphdom-swap

Handle DocumentFragement in morphdom-swap properly

src/ext/morphdom-swap.js

@@ -4,8 +4,13 @@ htmx.defineExtension('morphdom-swap', {
     },
     handleSwap: function (swapStyle, target, fragment) {
         if (swapStyle === 'morphdom') {
-            morphdom(target, fragment.outerHTML);
+            if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-            return [target]; // let htmx handle the new content
+                morphdom(target, fragment.firstElementChild);
+                return [target];
+            } else {
+                morphdom(target, fragment.outerHTML);
+                return [target];
+            }
         }
     }
 });

test/ext/morphdom-swap.js

@@ -28,4 +28,13 @@ describe("morphdom-swap extension", function() {
         btn.innerHTML.should.equal("Clicked!Loaded!");
     });
 
+    it('works with hx-select', function () {
+        this.server.respondWith("GET", "/test", "<button>Clicked!</button>!");
+        var btn = make('<button hx-get="/test" hx-ext="morphdom-swap" hx-swap="morphdom" hx-select="button" >Click Me!</button>')
+        btn.click();
+        should.equal(btn.getAttribute("hx-get"), "/test");
+        this.server.respond();
+        should.equal(btn.getAttribute("hx-get"), null);
+        btn.innerHTML.should.equal("Clicked!");
+    });
 });

www/extensions/morphdom-swap.md

@@ -8,6 +8,8 @@ title: </> htmx - high power tools for html
 This extension allows you to use the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the
 swapping mechanism in htmx.
 
+The `morphdom` library does not support morph element to multiple elements. If the result of `hx-select` is more than one element, it will pick the first one.
+
 #### Usage
 
 ```html