From 88152d871ff3dc3f8b29188d232de60dc0b59b6d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 14 Nov 2023 13:17:49 +0000
Subject: [PATCH] fix: bail-out of event delegation for each block reference

---
 .changeset/modern-ghosts-melt.md              |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    |  2 +-
 .../samples/each-mutation-2/_config.js        | 24 +++++++++++++++++++
 .../samples/each-mutation-2/main.svelte       |  7 ++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-ghosts-melt.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-mutation-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-mutation-2/main.svelte

diff --git a/.changeset/modern-ghosts-melt.md b/.changeset/modern-ghosts-melt.md
new file mode 100644
index 0000000000..c277af0b1e
--- /dev/null
+++ b/.changeset/modern-ghosts-melt.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: bail-out of event delegation for each block reference
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 99baf37307..1361af697d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -157,7 +157,7 @@ function get_delegated_event(node, context) {
 		if (
 			binding !== null &&
 			// Bail-out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-			((!context.state.analysis.runes && binding.kind === 'each') ||
+			(binding.kind === 'each' ||
 				// or any normal not reactive bindings that are mutated.
 				(binding.kind === 'normal' && context.state.analysis.runes) ||
 				// or any reactive imports (those are rewritten) (can only happen in legacy mode)
diff --git a/packages/svelte/tests/runtime-runes/samples/each-mutation-2/_config.js b/packages/svelte/tests/runtime-runes/samples/each-mutation-2/_config.js
new file mode 100644
index 0000000000..b9c6ddb5ff
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-mutation-2/_config.js
@@ -0,0 +1,24 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>Click me and get error</button><button>Click me and get error</button><button>Click me and get error</button>`,
+
+	async test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		// ensure each click doesn't trigger an error
+		await btn1.click();
+		await Promise.resolve();
+
+		await btn2.click();
+		await Promise.resolve();
+
+		await btn3.click();
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Click me and get error</button><button>Click me and get error</button><button>Click me and get error</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-mutation-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-mutation-2/main.svelte
new file mode 100644
index 0000000000..9a9fa031d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-mutation-2/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let arr = $state([1,2,3]);
+</script>
+
+{#each arr as value}
+			<button onclick={() => value += 1}>Click me and get error</button>
+{/each}