Skip to content

fix: bail-out of event delegation for each block reference #9446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/modern-ghosts-melt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: bail-out of event delegation for each block reference
2 changes: 1 addition & 1 deletion packages/svelte/src/compiler/phases/2-analyze/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
@@ -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>`
);
}
});
Original file line number Diff line number Diff line change
@@ -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}