Add fix and test (#3658)

packages/morph/src/dom.js

@@ -14,12 +14,18 @@ export let dom = {
     replace(children, old, replacement) {
         let index = children.indexOf(old)
 
+        let replacementIndex = children.indexOf(old)
+
         if (index === -1) throw 'Cant find element in children'
 
         old.replaceWith(replacement)
 
         children[index] = replacement
 
+        if (replacementIndex) {
+            children.splice(replacementIndex, 1)
+        }
+
         return children
     },
     before(children, reference, subject) {

packages/morph/src/morph.js

@@ -132,7 +132,7 @@ export function morph(from, toHtml, options) {
 
     function patchChildren(fromChildren, toChildren, appendFn) {
         // I think I can get rid of this for now:
-        let fromKeyDomNodeMap = {} // keyToMap(fromChildren)
+        let fromKeyDomNodeMap = keyToMap(fromChildren)
         let fromKeyHoldovers = {}
 
         let currentTo = dom.first(toChildren)

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

@@ -247,6 +247,35 @@ test('can morph using a custom key function',
     },
 )
 
+test('can morph using keys with existing key to be moved up',
+    [html`
+        <ul>
+            <li key="1">foo<input></li>
+            <li key="2">bar<input></li>
+            <li key="3">baz<input></li>
+        </ul>
+    `],
+    ({ get }, reload, window, document) => {
+        let toHtml = html`
+            <ul>
+                <li key="1">foo<input></li>
+                <li key="3">baz<input></li>
+            </ul>
+        `
+
+        get('li:nth-of-type(1) input').type('foo')
+        get('li:nth-of-type(3) input').type('baz')
+
+        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))
+
+        get('li').should(haveLength(2))
+        get('li:nth-of-type(1)').should(haveText('foo'))
+        get('li:nth-of-type(2)').should(haveText('baz'))
+        get('li:nth-of-type(1) input').should(haveValue('foo'))
+        get('li:nth-of-type(2) input').should(haveValue('baz'))
+    },
+)
+
 test('can morph text nodes',
     [html`<h2>Foo <br> Bar</h2>`],
     ({ get }, reload, window, document) => {