diff --git a/CHANGELOG.md b/CHANGELOG.md index ee84f7b799..f6aa7eca07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ * Permit reserved keywords as destructuring keys in `{#each}` ([#4372](https://github.com/sveltejs/svelte/issues/4372)) * Disallow reserved keywords in `{expressions}` ([#4372](https://github.com/sveltejs/svelte/issues/4372)) * Fix code generation error with precedence of arrow functions ([#4384](https://github.com/sveltejs/svelte/issues/4384)) +* Fix event handlers that are dynamic via reactive declarations or stores ([#4388](https://github.com/sveltejs/svelte/issues/4388)) * Fix invalidation in expressions like `++foo.bar` ([#4393](https://github.com/sveltejs/svelte/issues/4393)) ## 3.18.1 diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts index 4242c82394..110542d0b8 100644 --- a/src/compiler/compile/nodes/EventHandler.ts +++ b/src/compiler/compile/nodes/EventHandler.ts @@ -53,13 +53,6 @@ export default class EventHandler extends Node { } const node = this.expression.node; - if (node.type === 'Identifier') { - return ( - this.component.node_for_declaration.get(node.name) && - this.component.var_lookup.get(node.name).reassigned - ); - } - if (/FunctionExpression/.test(node.type)) { return false; } diff --git a/test/runtime/samples/event-handler-dynamic-2/_config.js b/test/runtime/samples/event-handler-dynamic-2/_config.js new file mode 100644 index 0000000000..c996d8f2aa --- /dev/null +++ b/test/runtime/samples/event-handler-dynamic-2/_config.js @@ -0,0 +1,33 @@ +export default { + html: ` + +

0

+ + + `, + + async test({ assert, target, window }) { + const [toggle, handler_a, handler_b] = target.querySelectorAll('button'); + const p = target.querySelector('p'); + + const event = new window.MouseEvent('click'); + + await handler_a.dispatchEvent(event); + assert.equal(p.innerHTML, '1'); + + await toggle.dispatchEvent(event); + + await handler_a.dispatchEvent(event); + assert.equal(p.innerHTML, '2'); + + await toggle.dispatchEvent(event); + + await handler_b.dispatchEvent(event); + assert.equal(p.innerHTML, '1'); + + await toggle.dispatchEvent(event); + + await handler_b.dispatchEvent(event); + assert.equal(p.innerHTML, '2'); + }, +}; diff --git a/test/runtime/samples/event-handler-dynamic-2/main.svelte b/test/runtime/samples/event-handler-dynamic-2/main.svelte new file mode 100644 index 0000000000..1b2041d3b8 --- /dev/null +++ b/test/runtime/samples/event-handler-dynamic-2/main.svelte @@ -0,0 +1,20 @@ + + + + +

{number}

+ + +