Skip to content

Svelte 5: bind:this prevents any child from stopping the propagation of an event to its parents #9688

@chainlist

Description

@chainlist

Describe the bug

Hello,

Discovered a bug on svelte 5 with the bind:this.

Using bind:this on a element will break the bubbleing behavior for every child element down the DOM tree.
Any stopPropagation() triggers on an event in a child element will not stop correctly the propagation of the event and the parent will then still receive the event.

After a little investigation, it does not seem to come from the new way of attaching the events onevent instead of on:event neither having the runes mode on.

Something weird is really happening with the bind:this feature.

Reproduction

Here's the bug reproduction REPL on Svelte 5
The same thing running correctly with Svelte 4

Expected behavior: Click on the div with red border on Svelte 5 should not trigger the parent event because the propagation was stopped in the child.

Logs

No log

System Info

N/A

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions