Only use lookahead when elements aren't the same

alpinejs · Jul 27, 2023 · 1396c74 · 1396c74
1 parent 7b9a3dd
commit 1396c74
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/morph.html b/morph.html
@@ -5,19 +5,43 @@
 
 <div id="before">
 <!-- Before markup goes here: -->
-<ul>
-    <li key="1">foo<input></li>
-    <li key="2">bar<input></li>
-    <li key="3">baz<input></li>
-</ul>
+<div>
+    <div>
+    </div>
+
+    <button type="button" wire:click="$refresh" dusk="refresh">
+        Refresh
+    </button>
+
+    <div dusk="child" key="foo">
+        <input type="text">
+        Child
+    </div>
+
+    <div>
+    </div>
+</div>
 </div>
 
 <div id="after" style="display: none;">
 <!-- After markup goes here: -->
-<ul>
-    <li key="1">foo<input></li>
-    <li key="3">baz<input></li>
-</ul>
+<div>
+    <div>
+    </div>
+
+    <button type="button" wire:click="$refresh" dusk="refresh">
+        Refresh
+    </button>
+
+    <div dusk="child" key="foo">
+        <input type="text">
+        Child
+    </div>
+
+    <div>
+    </div>
+</div>
+
 </div>
 
     <div style="display: flex;">

diff --git a/packages/morph/src/morph.js b/packages/morph/src/morph.js
@@ -218,13 +218,13 @@ export function morph(from, toHtml, options) {
             }
 
             // Lookaheads should only apply to non-text-or-comment elements...
-            if (currentFrom.nodeType === 1 && lookahead) {
+            if (currentFrom.nodeType === 1 && lookahead && ! currentFrom.isEqualNode(currentTo)) {
                 let nextToElementSibling = dom.next(toChildren, currentTo)
 
                 let found = false
 
                 while (! found && nextToElementSibling) {
-                    if (currentFrom.isEqualNode(nextToElementSibling)) {
+                    if (nextToElementSibling.nodeType === 1 && currentFrom.isEqualNode(nextToElementSibling)) {
                         found = true; // This ";" needs to be here...
 
                         [fromChildren, currentFrom] = addNodeBefore(fromChildren, currentTo, currentFrom)