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

Disable hover pause behavior?

Open khromov opened this issue 2 years ago • 4 comments

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 avatar Dec 31 '22 03:12 khromov

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.

khromov avatar Dec 31 '22 03:12 khromov

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

kbrgl avatar Jan 10 '23 17:01 kbrgl

@kbrgl Any news on this?

pierregoutheraud avatar Mar 19 '23 15:03 pierregoutheraud

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;'

IvanMatev avatar Jul 03 '24 17:07 IvanMatev