Fix Morph missing next sibling when replacing element (#2725)

* Remove only on previous test

* Add failing test for inline elements

* Fix debugging output

* Add fix for missing next sibling

packages/morph/src/morph.js

@@ -207,7 +207,7 @@ async function patchChildren(from, to) {
             } else {
                 let added = addNodeTo(currentTo, from) || {}
 
-                await breakpoint('Add element: ' + added.outerHTML || added.nodeValue)
+                await breakpoint('Add element: ' + (added.outerHTML || added.nodeValue))
 
                 currentTo = dom(currentTo).nodes().next()
 
@@ -278,11 +278,14 @@ async function patchChildren(from, to) {
             }
         }
 
+        // Get next from sibling before patching in case the node is replaced
+        let currentFromNext = currentFrom && dom(currentFrom).nodes().next()
+
         // Patch elements
         await patch(currentFrom, currentTo)
 
         currentTo = currentTo && dom(currentTo).nodes().next()
-        currentFrom = currentFrom && dom(currentFrom).nodes().next()
+        currentFrom = currentFromNext
     }
 
     // Cleanup extra froms.

tests/cypress/integration/plugins/morph.spec.js

@@ -256,7 +256,7 @@ test('can morph text nodes',
     },
 )
 
-test.only('can morph with added element before and siblings are different',
+test('can morph with added element before and siblings are different',
     [html`
         <button>
             <div>
@@ -286,3 +286,22 @@ test.only('can morph with added element before and siblings are different',
             `))
     },
 )
+
+test('can morph different inline nodes',
+    [html`
+    <div id="from">
+        Hello <span>World</span>
+    </div>
+    `],
+    ({ get }, reload, window, document) => {
+        let toHtml = html`
+        <div id="to">
+            Welcome <b>Person</b>!
+        </div>
+        `
+
+        get('div').then(([el]) => window.Alpine.morph(el, toHtml))
+
+        get('div').should(haveHtml('\n            Welcome <b>Person</b>!\n        '))
+    },
+)