svelte-french-toast icon indicating copy to clipboard operation
svelte-french-toast copied to clipboard

Mouseleave event is never triggered on iOS after interacting with a toast that has a button

Open axtn opened this issue 2 years ago • 1 comments

https://github.com/kbrgl/svelte-french-toast/blob/533d5800519684fcef73f18d9024b6177ebc015f/src/lib/components/Toaster.svelte#L32

This is an issue on iOS devices (that I've tested... iOS 16 and iPad OS) When you click on a button (mouseenter) in a toast that has a rich content component (just like in the demo site dismiss btn), the subsequent toasts will be paused and never dismissed automatically.

In my app, I have to dispatch a custom event on dismiss to make sure subsequent toasts don't display forever document.querySelector('.toaster')?.dispatchEvent(new CustomEvent('mouseleave'));

axtn avatar Oct 17 '22 21:10 axtn

Huh. That's odd. I imagine this may have something to do with the fact that pointer events are disabled somewhere in the CSS. But I don't see why it would happen only on mobile Safari.

kbrgl avatar Oct 24 '22 06:10 kbrgl