search

kbrgl / svelte-french-toast

🍞🥂 Buttery smooth toast notifications for Svelte
https://svelte-french-toast.vercel.app/
MIT License
838 stars 30 forks source link

Disable hover pause behavior? #18

Open khromov opened 1 year ago

khromov commented 1 year ago

By default the notification seem to have functionality that allows them to stay on the screen while hovered. Is there a way to disable this? The reason is that I quickly found some edge cases where the notifications get stuck on the screen if the browser window loses focus, and I'm not sure it's easily fixable (because the mouseleave event probably doesn't trigger even when the window is activated again, unless you actually hover over the notification again)

I would rather not deal with this complexity, especially considering the notifications don't have a dismiss button by default, so end user might get into a situation where they don't understand why the notification stays on the screen.

Would it be possible to add something like pauseOnHover: boolean to disable the behavior and have the notifications always close at exactly the duration?

PS. Although a different issue, it would be nice to have a built-in "X" button to dismiss notifications, like svelte-notifications has.

khromov commented 1 year ago

To reproduce this:

  1. Open Chrome debugger in device mode so you get the "round" cursor.
  2. Trigger a notification
  3. Click on it with your "cursor" / "tap"
  4. The notification is now stuck forever until you click/tap somewhere else on the screen.
kbrgl commented 1 year ago

Thanks for the reproduction steps! I think disabling pause-on-hover is a sensible option to have.

pierregoutheraud commented 1 year ago

@kbrgl Any news on this?

IvanMatev commented 2 months ago

Hi guys, I had the same issue with the toast getting stuck on mobile, I was able to work around it by using. the only issue with this is being able to click through the toast.

style: 'touch-action: none; pointer-events: none;'