Fix morph when x-for is used inside x-teleport (#4168)

alpinejs · Apr 22, 2024 · c97aaff · c97aaff
1 parent b9eb50c
commit c97aaff
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/alpinejs/src/directives/x-teleport.js b/packages/alpinejs/src/directives/x-teleport.js
@@ -49,7 +49,7 @@ directive('teleport', (el, { modifiers, expression }, { cleanup }) => {
     mutateDom(() => {
         placeInDom(clone, target, modifiers)
 
-        initTree(clone)
+        skipDuringClone(() => initTree(clone))()
 
         clone._x_ignore = true
     })

diff --git a/tests/cypress/integration/plugins/morph.spec.js b/tests/cypress/integration/plugins/morph.spec.js
@@ -537,3 +537,44 @@ test('can morph menu',
         get('input').should(haveValue('foo'))
     },
 )
+
+test('can morph teleports with x-for',
+    [html`
+    <main x-data>
+        <template x-teleport="body">
+            <article>
+                <template x-for="item in 3" :key="item">
+                    <span x-text="item"></span>
+                </template>
+            </article>
+        </template>
+
+        <button x-data="{ count: 1 }" x-text="count" x-on:click="count++" type="button"></button>
+    </main>
+    `],
+    ({ get }, reload, window, document) => {
+        let toHtml = html`
+        <main x-data>
+            <template x-teleport="body">
+                <article>
+                    <template x-for="item in 3" :key="item">
+                        <span x-text="item"></span>
+                    </template>
+                </article>
+            </template>
+
+            <button x-data="{ count: 1 }" x-text="count" x-on:click="count++" type="button"></button>
+        </main>
+        `
+
+        get('button').should(haveText('1'));
+        get('button').click()
+        get('button').should(haveText('2'));
+
+        get('main').then(([el]) => window.Alpine.morph(el, toHtml));
+
+        get('button').should(haveText('2'));
+        get('button').click()
+        get('button').should(haveText('3'));
+    },
+)