Show the first new element for outerHTML swaps that start with whitespace

src/htmx.js

@@ -1404,7 +1404,8 @@ var htmx = (() => {
                         this.__insertNodes(parentNode, target, fragment);
                         this.__cleanup(target)
                         parentNode.removeChild(target);
-                        target = newContent[0] || parentNode
+                        // Prefer the first element, a leading whitespace text node can't be scrolled to
+                        target = newContent.find(node => node.nodeType === Node.ELEMENT_NODE) || newContent[0] || parentNode
                     }
                 } else if (swapStyle === 'outerSync') {
                     this.__copyAttributes(target, fragment.firstElementChild);

test/tests/attributes/hx-swap.js

@@ -44,6 +44,40 @@ describe('hx-swap modifiers', function() {
         assert.isAbove(div.scrollTop, 0)
     })
 
+    it('outerHTML with show:top shows the new element when the response starts with whitespace', async function () {
+        mockResponse('GET', '/test', '\n  <div id="new-content">New</div>\n')
+        let div = createProcessedHTML('<div hx-get="/test" hx-swap="outerHTML show:top">Old</div>');
+        let shown = [];
+        let originalScrollIntoView = Element.prototype.scrollIntoView;
+        Element.prototype.scrollIntoView = function (alignToTop) { shown.push([this, alignToTop]) };
+        try {
+            div.click()
+            await forRequest()
+        } finally {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        }
+        assert.equal(shown.length, 1)
+        assert.equal(shown[0][0].id, 'new-content')
+        assert.isTrue(shown[0][1])
+    })
+
+    it('outerHTML with show:bottom shows the new element when the response starts with whitespace', async function () {
+        mockResponse('GET', '/test', '\n  <div id="new-content">New</div>\n')
+        let div = createProcessedHTML('<div hx-get="/test" hx-swap="outerHTML show:bottom">Old</div>');
+        let shown = [];
+        let originalScrollIntoView = Element.prototype.scrollIntoView;
+        Element.prototype.scrollIntoView = function (alignToTop) { shown.push([this, alignToTop]) };
+        try {
+            div.click()
+            await forRequest()
+        } finally {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        }
+        assert.equal(shown.length, 1)
+        assert.equal(shown[0][0].id, 'new-content')
+        assert.isFalse(shown[0][1])
+    })
+
     it('processes scripts in swapped content', async function () {
         mockResponse('GET', '/test', '<div><script>window.testScriptRan = true;</script></div>')
         let div = createProcessedHTML('<div hx-get="/test">Old</div>');