[Feature Request] Ability to pause timeout when actively hovering/mousing over the toast

[avisra]

Is your feature request related to a problem? Please describe. Let's assume the toast message requires taking action - like clicking a button, or copying some text out from it. Depending on the speed of the user, it is a common complaint that the toast closes before they can complete the action.

Describe the solution you'd like Similar to the react-toastify library, I recommend we add a "pauseOnHover" option which enables this feature. When a user's mouse is actively hovering over a toast message, the timeout should be paused, and the progress bar should be paused.

Describe alternatives you've considered We've considered just increasing the timeout... but this is not desirable

[chrissainty]

Hi @avisra, this sounds like a great enhancement. Is this something you're be willing to create a PR for?

[hellfirehd]

In addition to this, it would be great if the toast would immediately fade out upon mouse out.

[Liero]

@hellfirehd: "immediately fade out upon mouse out" - In my own toast notifications library I have a ExtendedTimeout option, which is used toastr as well: https://codeseven.github.io/toastr/demo.html

basically you can configure the delay between mouse out and and fade out.

[Cvijo]

This should be pretty easy to add, I don't know how to propose this to implement but something like this would work so if someone can check it and merge it with the next build

in ToastSettings.cs add

public bool PauseProgressOnHover { get; set; }

in BlatoredToast.razor.cs add

    private void MouseOver(MouseEventArgs e)
    {
        if(Settings.PauseProgressOnHover)
        {
            _countdownTimer?.Pause();
        }
    }

    private void MouseOut(MouseEventArgs e)
    {
        if (Settings.PauseProgressOnHover)
        {
            _progress = 99; // for 1 sec close after mouse out (request = In addition to this, it would be great if the toast would immediately fade out upon mouse out.)
            _countdownTimer?.UnPause();
        }
    }

in Blazored.razor add

<div class="blazored-toast @Settings.AdditionalClasses" @onclick="ToastClick" @onmouseover="MouseOver" @onmouseout="MouseOut">

in CountdownTimes.cs

private bool _paused;

 internal CountdownTimer Pause()
 {
     _paused = true;
     return this;
 }

 internal CountdownTimer UnPause()
 {
     _paused = false;
     return this;
 }


private async Task DoWorkAsync()
 {
     while (await _timer.WaitForNextTickAsync(_cancellationToken) && !_cancellationToken.IsCancellationRequested)
     {
         if (!_paused) //only progress if not paused
         {
             _percentComplete++;
         }
         if (_tickDelegate != null)
         {
             await _tickDelegate(_percentComplete);
         }
         //await _tickDelegate?.Invoke(_percentComplete)!;

         if (_percentComplete == _ticksToTimeout)
         {
             _elapsedDelegate?.Invoke();
         }
     }
 }

maybe add another property if AutoCloseOnMouseOut and then set _progress=99 before Unpause (better to stay up 1 more sec) or just call _timer.Dispose()

This can have max 1 sec delay on pausing since ticking is every 1 sec