Skip to content

Svelte 5: events created with the "on" function will bubble separately from one another #12012

Closed
@HighFunctioningSociopathSH

Description

Describe the bug

If you have an event callback passed to a parent element. it will be called multiple times depending on how many events were added to its child with the on function.

Reproduction

let's say we have the structure below:
+page.svelte

<script lang="ts">
  import { on } from "svelte/events";
  
  function handleParentKeyDown(e: KeyboardEvent) {
    console.log("parent keydown");
  }
  function keydownOne(node: HTMLButtonElement) {
    on(node, "keydown", (e) => {});
  }
  function keydownTwo(node: HTMLButtonElement) {
    on(node, "keydown", (e) => {});
  }
  function keydownThree(node: HTMLButtonElement) {
    on(node, "keydown", (e) => {});
  }
</script>

<div onkeydown={handleParentKeyDown}>
  <button use:keydownOne use:keydownTwo use:keydownThree>button</button>
</div>

The handleParentKeyDown is supposed to only get called once when a key is pressed on the child button as a result of bubbling but here it is called three times; one for each "on" function used.

REPL

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 4.19 GB / 15.63 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.3 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0-next.154 => 5.0.0-next.154

Severity

blocking an upgrade

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions