From e104cfb2f114a926375d800158d46148d8ed727a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Fri, 23 Feb 2024 12:40:32 +0000
Subject: [PATCH] fix: improve event delegation with shadowed bindings

---
 .changeset/little-pans-jog.md                    |  5 +++++
 .../src/compiler/phases/2-analyze/index.js       |  7 +++++++
 .../event-attribute-delegation-6/_config.js      | 16 ++++++++++++++++
 .../samples/event-attribute-delegation-6/log.js  |  2 ++
 .../event-attribute-delegation-6/main.svelte     | 12 ++++++++++++
 5 files changed, 42 insertions(+)
 create mode 100644 .changeset/little-pans-jog.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/log.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/main.svelte

diff --git a/.changeset/little-pans-jog.md b/.changeset/little-pans-jog.md
new file mode 100644
index 0000000000..891f2ea88f
--- /dev/null
+++ b/.changeset/little-pans-jog.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve event delegation with shadowed bindings
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 8b2b806ec7..b987407e7f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -176,6 +176,13 @@ function get_delegated_event(event_name, handler, context) {
 			return non_hoistable;
 		}
 		const binding = scope.get(reference);
+		const local_binding = context.state.scope.get(reference);
+
+		// If we are referencing a binding that is shadowed in another scope then bail out.
+		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+			debugger;
+			return non_hoistable;
+		}
 
 		// If we have multiple references to the same store using $ prefix, bail out.
 		if (
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/_config.js
new file mode 100644
index 0000000000..bc16bf031f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		await Promise.resolve();
+		assert.deepEqual(log, ['method']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/log.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/log.js
new file mode 100644
index 0000000000..d3df521f4d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/log.js
@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/main.svelte
new file mode 100644
index 0000000000..0a365990ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-6/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { log } from './log.js';
+
+	let method = $state('method');
+	function submitPay() {
+		log.push(method);
+	}
+	let methods = [{method:1}];
+</script>
+{#each methods as {method}}
+	<button onclick={submitPay}>{method}</button>
+{/each}