Skip to content

Commit b4a70ea

Browse files
authored
fix: improve event delegation with shadowed bindings (#10620)
* fix: improve event delegation with shadowed bindings * fix: improve event delegation with shadowed bindings
1 parent 351d463 commit b4a70ea

File tree

5 files changed

+41
-0
lines changed

5 files changed

+41
-0
lines changed

.changeset/little-pans-jog.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"svelte": patch
3+
---
4+
5+
fix: improve event delegation with shadowed bindings

packages/svelte/src/compiler/phases/2-analyze/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,12 @@ function get_delegated_event(event_name, handler, context) {
176176
return non_hoistable;
177177
}
178178
const binding = scope.get(reference);
179+
const local_binding = context.state.scope.get(reference);
180+
181+
// If we are referencing a binding that is shadowed in another scope then bail out.
182+
if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
183+
return non_hoistable;
184+
}
179185

180186
// If we have multiple references to the same store using $ prefix, bail out.
181187
if (
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { test } from '../../test';
2+
import { log } from './log.js';
3+
4+
export default test({
5+
before_test() {
6+
log.length = 0;
7+
},
8+
9+
async test({ assert, target }) {
10+
const btn = target.querySelector('button');
11+
12+
btn?.click();
13+
await Promise.resolve();
14+
assert.deepEqual(log, ['method']);
15+
}
16+
});
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/** @type {any[]} */
2+
export const log = [];
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
import { log } from './log.js';
3+
4+
let method = $state('method');
5+
function submitPay() {
6+
log.push(method);
7+
}
8+
let methods = [{method:1}];
9+
</script>
10+
{#each methods as {method}}
11+
<button onclick={submitPay}>{method}</button>
12+
{/each}

0 commit comments

Comments
 (0)