Describe the bug

In my application, I am toggling parts of DOM based on user action, typically click. This may be category toggle that shows a list of items and the DOM is behind {#if ...}...{/if}, or popup, which I mount dynamically with mount().

I have noticed that sometimes events fire multiple times. Or at least that's what I think is happening. Typically that means that you click the button that should mount popup, and the popup is mounted 2 or 3 times. Or category doesn't toggle properly and it needs few clicks.

Reproduction

This seems to be happening only in Firefox, from what I have seen. I'm therefore not sure if this is a browser bug, or svelte bug.

In the REPL below there are three buttons, toggling a component with simple list. Small list has 100 items and toggling it seems to always work properly. Large list has 10000 items and toggling it doesn't (usualy) work. If you can't replicate it, you may try to increase number of items.

The workaround that seems to work is to trigger the change in animation frame.

https://svelte.dev/playground/d9ee33fb8a6547eb90be1283cbb23894?version=5.37.1

The inevitable conclusion to this is that I have to wrap all event handlers in requestAnimationFrame, if I want to be sure that it works properly. It's not easily deduced which DOM change will produce the bug, and which will not.

System Info

Windows 10
Firefox 141.0 (64-bit)

Severity

annoyance