Merge pull request #851 from KevinBatdorf/fix/add-check-for-template-sibling

Add check for template tag when there are sibling x-for

dist/alpine-ie11.js

@@ -6418,7 +6418,9 @@
   }
 
   function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {
-    if (!nextEl) return; // If the the key's DO match, no need to look ahead.
+    if (!nextEl) return; // If we are already past the x-for generated elements, we don't need to look ahead.
+
+    if (nextEl.__x_for_key === undefined) return; // If the the key's DO match, no need to look ahead.
 
     if (nextEl.__x_for_key === currentKey) return nextEl; // If they don't, we'll look ahead for a match.
     // If we find it, we'll move it to the current position in the loop.

dist/alpine.js

@@ -603,7 +603,9 @@
   }
 
   function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {
-    if (!nextEl) return; // If the the key's DO match, no need to look ahead.
+    if (!nextEl) return; // If we are already past the x-for generated elements, we don't need to look ahead.
+
+    if (nextEl.__x_for_key === undefined) return; // If the the key's DO match, no need to look ahead.
 
     if (nextEl.__x_for_key === currentKey) return nextEl; // If they don't, we'll look ahead for a match.
     // If we find it, we'll move it to the current position in the loop.

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs",
-    "version": "2.7.0",
+    "version": "2.7.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

src/directives/for.js

@@ -113,6 +113,9 @@ function addElementInLoopAfterCurrentEl(templateEl, currentEl) {
 function lookAheadForMatchingKeyedElementAndMoveItIfFound(nextEl, currentKey) {
     if (! nextEl) return
 
+    // If we are already past the x-for generated elements, we don't need to look ahead.
+    if (nextEl.__x_for_key === undefined) return
+
     // If the the key's DO match, no need to look ahead.
     if (nextEl.__x_for_key === currentKey) return nextEl
 

test/for.spec.js

@@ -377,6 +377,30 @@ test('nested x-for access outer loop variable', async () => {
     expect(document.querySelectorAll('h2')[3].textContent).toEqual('baz: lab')
 })
 
+test('sibling x-for do not interact with each other', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foos: [1], bars: [1, 2] }">
+            <template x-for="foo in foos">
+                <h1 x-text="foo"></h1>
+            </template>
+            <template x-for="bar in bars">
+                <h2 x-text="bar"></h2>
+            </template>
+            <button @click="foos = [1, 2];bars = [1, 2, 3]">Change</button>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(1) })
+    await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(2) })
+
+    document.querySelector('button').click()
+
+    await wait(() => { expect(document.querySelectorAll('h1').length).toEqual(2) })
+    await wait(() => { expect(document.querySelectorAll('h2').length).toEqual(3) })
+})
+
 test('nested x-for event listeners', async () => {
     document._alerts = []