diff --git a/src/ext/morphdom-swap.js b/src/ext/morphdom-swap.js
index 875c1822..a5a7e5a3 100644
--- a/src/ext/morphdom-swap.js
+++ b/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);
- return [target]; // let htmx handle the new content
+ if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+ morphdom(target, fragment.firstElementChild);
+ return [target];
+ } else {
+ morphdom(target, fragment.outerHTML);
+ return [target];
+ }
}
}
});
diff --git a/test/ext/morphdom-swap.js b/test/ext/morphdom-swap.js
index c394c909..439fa54c 100644
--- a/test/ext/morphdom-swap.js
+++ b/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", "!");
+ var btn = make('')
+ btn.click();
+ should.equal(btn.getAttribute("hx-get"), "/test");
+ this.server.respond();
+ should.equal(btn.getAttribute("hx-get"), null);
+ btn.innerHTML.should.equal("Clicked!");
+ });
});
diff --git a/www/extensions/morphdom-swap.md b/www/extensions/morphdom-swap.md
index 4a6fafbd..afcb0abf 100644
--- a/www/extensions/morphdom-swap.md
+++ b/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