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