diff --git a/.changeset/cyan-news-grow.md b/.changeset/cyan-news-grow.md new file mode 100644 index 0000000000..1e7e5d342d --- /dev/null +++ b/.changeset/cyan-news-grow.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: address event delegation duplication behaviour diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js index 27aa75c339..c5014b20b1 100644 --- a/packages/svelte/src/internal/client/dom/elements/events.js +++ b/packages/svelte/src/internal/client/dom/elements/events.js @@ -42,7 +42,7 @@ export function create_event(event_name, dom, handler, options) { * @this {EventTarget} */ function target_handler(/** @type {Event} */ event) { - if (!options.capture) { + if (!options.capture && /** @type {Event & {__root: any}} */ (event).__root === undefined) { // Only call in the bubble phase, else delegated events would be called before the capturing events handle_event_propagation(dom, event); } diff --git a/packages/svelte/tests/runtime-runes/samples/event-on-2/_config.js b/packages/svelte/tests/runtime-runes/samples/event-on-2/_config.js new file mode 100644 index 0000000000..0f3fe5358a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-on-2/_config.js @@ -0,0 +1,16 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + test({ assert, target, logs }) { + const [b1] = target.querySelectorAll('button'); + + const keydown = new window.KeyboardEvent('keydown', { bubbles: true }); + + b1?.dispatchEvent(keydown); + flushSync(); + assert.deepEqual(logs, ['parent keydown']); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/event-on-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-on-2/main.svelte new file mode 100644 index 0000000000..fc037d1eca --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/event-on-2/main.svelte @@ -0,0 +1,20 @@ + + +
+ +