From 08d93a2f5f96070568be4a3628b7e208e2556d5e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:58:22 +0000
Subject: [PATCH] fix: improve each block with animate (#9839)

---
 .changeset/twelve-dragons-join.md             |  5 ++
 packages/svelte/src/internal/client/each.js   |  1 +
 .../samples/animation-flip/_config.js         | 63 +++++++++++++++++++
 .../samples/animation-flip/main.svelte        | 27 ++++++++
 4 files changed, 96 insertions(+)
 create mode 100644 .changeset/twelve-dragons-join.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte

diff --git a/.changeset/twelve-dragons-join.md b/.changeset/twelve-dragons-join.md
new file mode 100644
index 0000000000..0beef35ecc
--- /dev/null
+++ b/.changeset/twelve-dragons-join.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve each block with animate
diff --git a/packages/svelte/src/internal/client/each.js b/packages/svelte/src/internal/client/each.js
index ef3e4c81ae..80c3060171 100644
--- a/packages/svelte/src/internal/client/each.js
+++ b/packages/svelte/src/internal/client/each.js
@@ -514,6 +514,7 @@ function reconcile_tracked_array(
 						a = sources[i];
 						if (pos === MOVED_BLOCK && a !== LIS_BLOCK) {
 							block = b_blocks[b_end];
+							item = array[b_end];
 							update_each_item_block(block, item, b_end, flags);
 						}
 					}
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js
new file mode 100644
index 0000000000..45deb91690
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-flip/_config.js
@@ -0,0 +1,63 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		ok(button);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Shuffle</button><div class="list"><label><input type="checkbox">
+			write
+			some
+			docs</label><label><input type="checkbox">
+			start
+			writing
+			JSConf
+			talk</label><label><input type="checkbox">
+			buy
+			some
+			milk</label><label><input type="checkbox">
+			mow
+			the
+			lawn</label><label><input type="checkbox">
+			feed
+			the
+			turtle</label><label><input type="checkbox">
+			fix
+			some
+			bugs</label></div>`
+		);
+
+		flushSync(() => {
+			button.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Shuffle</button><div class="list"><label><input type="checkbox">
+			 fix
+			 some
+			 bugs</label><label><input type="checkbox">
+			 feed
+			 the
+			 turtle</label><label><input type="checkbox">
+			 mow
+			 the
+			 lawn</label><label><input type="checkbox">
+			 buy
+			 some
+			 milk</label><label><input type="checkbox">
+			 start
+			 writing
+			 JSConf
+			 talk</label><label><input type="checkbox">
+			 write
+			 some
+			 docs</label></div>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte
new file mode 100644
index 0000000000..8ab1194043
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-flip/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { flip } from 'svelte/animate';
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' }
+	];
+
+	function update() {
+		todos = Array.from(todos).reverse();
+	}
+</script>
+
+<button on:click={update}>Shuffle</button>
+
+<div class="list">
+	{#each todos as todo (todo.id)}
+		<label animate:flip>
+			<input type="checkbox" bind:checked={todo.done} />
+			{todo.description}
+		</label>
+	{/each}
+</div>