Skip to content

Commit 23c5d0a

Browse files
committed
fix: address event delegation duplication behaviour
1 parent 2491eb7 commit 23c5d0a

File tree

4 files changed

+42
-1
lines changed

4 files changed

+42
-1
lines changed

.changeset/cyan-news-grow.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: address event delegation duplication behaviour

packages/svelte/src/internal/client/dom/elements/events.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function create_event(event_name, dom, handler, options) {
4242
* @this {EventTarget}
4343
*/
4444
function target_handler(/** @type {Event} */ event) {
45-
if (!options.capture) {
45+
if (!options.capture && /** @type {Event & {__root: any}} */ (event).__root === undefined) {
4646
// Only call in the bubble phase, else delegated events would be called before the capturing events
4747
handle_event_propagation(dom, event);
4848
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { flushSync } from 'svelte';
2+
import { test } from '../../test';
3+
4+
export default test({
5+
mode: ['client'],
6+
7+
test({ assert, target, logs }) {
8+
const [b1] = target.querySelectorAll('button');
9+
10+
const keydown = new window.KeyboardEvent('keydown', { bubbles: true });
11+
12+
b1?.dispatchEvent(keydown);
13+
flushSync();
14+
assert.deepEqual(logs, ['parent keydown']);
15+
}
16+
});
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script>
2+
import { on } from "svelte/events";
3+
4+
function handleParentKeyDown() {
5+
console.log("parent keydown");
6+
}
7+
function keydownOne(node) {
8+
on(node, "keydown", (e) => {});
9+
}
10+
function keydownTwo(node) {
11+
on(node, "keydown", (e) => {});
12+
}
13+
function keydownThree(node) {
14+
on(node, "keydown", (e) => {});
15+
}
16+
</script>
17+
18+
<div onkeydown={handleParentKeyDown}>
19+
<button use:keydownOne use:keydownTwo use:keydownThree>button</button>
20+
</div>

0 commit comments

Comments
 (0)