search

leptos-rs / leptos

Build fast web applications with Rust.
https://leptos.dev
MIT License
15.31k stars 599 forks source link

Click events are registered twice when two leptos custom elements are on a page #2564

Open SorenHolstHansen opened 2 months ago

SorenHolstHansen commented 2 months ago

Describe the bug You can find a repro case here.

I have defined two web components using your custom-elements crate with leptos as the component framework. The components are very simple to show the bug and are just a button with a click handler. However when embedding both on a site, whenever clicking one of the buttons, two click events are registered (See the video in the repro repo).

If I tried to add the buttons in raw "js", that is, through web-sys with add_event_listener; then only one click event is registered which leads me to think this is a Leptos problem.

You can see a video of the issue here:

https://github.com/leptos-rs/leptos/assets/54755687/ecfdc26b-c293-419f-bb55-42a0c73c316a

I hope it makes sense, please tell me if this belongs in the custom-elements repo instead.

Leptos Dependencies

leptos = { version = "0.6.11", features = ["csr"] }

To Reproduce Steps to reproduce the behavior:

  1. See https://github.com/SorenHolstHansen/leptos-custom-elements-double-click

Expected behavior I would expect only one click event being sent when clicking the button

gbj commented 2 months ago

If you opt out of event delegation by using on:click:undelegated does it work as expected? (I have not tried)

SorenHolstHansen commented 2 months ago

Yeah, that seems to fix it, thanks! Is there some way to do this simpler? I am not the biggest fan of having to put that flag on all event handlers

SorenHolstHansen commented 2 months ago

I tried merging the two components into one crate, so the "run" function defines both custom components, and that seemed to fix the issue as well