svelte-french-toast
svelte-french-toast copied to clipboard
Mouseleave event is never triggered on iOS after interacting with a toast that has a button
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'));
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.