React-toastify: pauseOnFocusLoss is not working

[Ggayane]

I'm using 4.5.2 version, and setting pauseOnFocusLoss to false, is not working as expected. I tried both on ToastContainer and on toast(), for both couldn't make it work. Can you please, help me with that?

[fkhadra]

Hello @Ggayane,

May I ask you to check my codesandbox sample below. Click on the click button, then click outside, the toast time will pause. Can you try to reproduce the issue ? Thank you

[Ggayane]

Hi, @fkhadra thank you for your response. The thing is that the autoclose timer keeps working on window blur, but when I go back to my window again I can see how the toaster moves to right (the transition). Is there a way not show that as well?

[fkhadra]

Do you trigger window.blur programmatically ?

[Ggayane]

no

[Ggayane]

the thing is that let's say you have toasters opened with 3s autoClose, and you go to another tab and then you come back after 5 seconds and you can see all those 10 toasters for ~500ms and then they disappear. Can you please tell, is there a way to avoid that?

[fkhadra]

Hello @Ggayane,

I have miss read your question. I just saw that in your case pauseOnFocusLoss is set to false.
Why it happens? To dismiss the toast the onTransitionEnd event is used. When you switch tab onTransitionEnd is not called with chrome or safari, this is a known bug. The issue is solved with firefox

How to avoid that:

• use pauseOnFocusLoss : but you don't want that
• Dismiss all the toasts when the window loose focus:

window.addEventListener("blur", () => {
  toast.dismiss();
});

[Ggayane]

thanks a lot, this worked!