Hovering over sl-tooltip inside of an sl-dialog triggers dialog events

[leonbeon]

Describe the bug

Showing a tooltip inside of a sl-details element seems to trigger the corresponding hide and show events. It seems to be caused by the events waiting on animations to finish, and - I assume - considering all children animations as well (since the tooltip is faded in and out).

To Reproduce

Steps to reproduce the behavior:

1. Add event listeners to sl-details
2. Add child with tooltip inside sl-details
3. Watch the events triggering on tooltip hover

Demo

Please see this codepen: https://codepen.io/leonbeon/pen/abxqdqo
You can see events triggering when hovering over the button instead of just showing/hiding via clicking on the summary element.

Browser / OS

• OS: Windows
• Browser: Firefox
• Browser version: 124

[claviska]

What you’re seeing is event bubbling. Please check out this post for more info and ways to solve it.

https://www.abeautifulsite.net/posts/custom-event-names-and-the-bubbling-problem/

[chdenat]

Hi @claviska

I have a similar behavior with tooltips and drawers on React, where hovering over a tooltip closes the drawer.
This is an event bubbling event.

I tried to add an event to SlTooltip to interact with the event bubbling:
SlHide and SlAfterHide with preventDefault didn't work at all (they didn't prevent the drawer from closing).

I then tried to intercept events on SlDrawer.
SlHide didn't work, it's too late, the drawer is closing.
SlRequestClose didn't work, it didn't trap this type of tooltip event.

So my only solution is to remove the SlTooltips... :(

Any idea?

Thanks

[claviska]

It's hard to tell without seeing code, but a common pitfall is to not check the event target to make sure you're listening to the right event. Chances are, a nested element's event is triggering the listener.

More info here: https://www.abeautifulsite.net/posts/custom-event-names-and-the-bubbling-problem/

[chdenat]

Cory,As I wrote earlier, I've checked various possibilities (I've managed the bubbling event in other shoelace components without any problem with eventPhase) but in this case it fails.What I'm thinking is that, in the Drawer, there's no way to prevent it from closing because in both hide events, it's too late.I"ll investigate later.ChristianDe : Cory LaViska ***@***.***>Envoyé : mardi, juin 4, 2024 5:31:34 PMÀ : shoelace-style/shoelace ***@***.***>Cc : Christian Denat ***@***.***>; Comment ***@***.***>Objet : Re: [shoelace-style/shoelace] Hovering over `sl-tooltip` inside of an `sl-dialog` triggers dialog events (Discussion #1957) It's hard to tell without seeing code, but a common pitfall is to not check the event target to make sure you're listening to the right event. Chances are, a nested element's event is triggering the listener. More info here: https://www.abeautifulsite.net/posts/custom-event-names-and-the-bubbling-problem/ —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>