React-toastify: Toasts are not autoclosed when tab is inactive

[smashercosmo]

Do you want to request a feature or report a bug?
Seems like a bug

What is the current behavior?
Toasts are not autoclosed when tab is in inactive state (when document.visibilityState is not 'visible')

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

1. Start showing toasts in an interval
2. Switch to different tab
3. Wait a little
4. Come back to tab with toasts
5. You'll see a bunch of toasts stacked

What is the expected behavior?
I really don't know. May be it should be solved in userland (like user should take care of not showing toasts when tab is inactive) or may be it can be solved on the library level.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
MacOS Sierra 10.12.6
Chrome v72
React v16.8

[smashercosmo]

Ok, just found this issue https://github.com/fkhadra/react-toastify/issues/51
Then it's probably not a bug report, but a feature request to make it possible to opt out of this behaviour
Motivation: if you have some repeatedly performing task that causes notification to show and you switch to other tab and leave it like this for a big amount of time it can cause big cpu and memory consumption due to constantly growing DOM tree.

[fkhadra]

Hello @smashercosmo,

Why don't you set pauseOnFocusLoss to false as shown here. Is it what you are looking for ?

[smashercosmo]

Hey, I checked pauseOnFocusLoss option, but it doesn't work the way I expected. I tested with the following code

setInterval(() => {
  notify.error('test')
}, 1000)

When the tab is active I see that notifications appear and disappear with the same rate, so notifications are not accumulated. But if I switch to another tab for a while and then switch back, I see many notifications on the page at the same time and then they all disappear at once.

[ethorz]

It would be good to fix this bug

[fkhadra]

Hello @smashercosmo,

Is this issue still relevant ?

Thanks

[smashercosmo]

Yep, still an issue

[ramospedro]

It's reproducible in this Pen: https://codesandbox.io/s/e7zkd

The notifications are not being dismissed if the tab isn't active.

I'm taking a look to see if I can solve.

[fkhadra]

@ramospedro and I had a chat on discord about that issue. I was asking myself that question:

What should be the correct behaviour when a user switch to another tab.
If you switch to another tab what do you expect when you come back:
1- No notification at all(prevent notification from rendering)
2- Stack all notification (don't make much sense)

For the first solution it can be done internally or at user level.
Here is a sample showing how it's done at user level https://codesandbox.io/s/sleepy-tereshkova-2uhqd?fontsize=14

I don't like the second solution because stacking all the notification at once does not make sense from a user point of view.

Please share what do you think guys 😁

[ramospedro]

@ramospedro and I had a chat on discord about that issue. I was asking myself that question:

What should be the correct behaviour when a user switch to another tab.
If you switch to another tab what do you expect when you come back:
1- No notification at all(prevent notification from rendering)
2- Stack all notification (don't make much sense)

For the first solution it can be done internally or at user level.
Here is a sample showing how it's done at user level https://codesandbox.io/s/sleepy-tereshkova-2uhqd?fontsize=14

I don't like the second solution because stacking all the notification at once does not make sense from a user point of view.

Please share what do you think guys

I think the solution you showed in the sandbox might actually be a very good alternative.

Just thinking now if it's worth implementing inside the lib and exposing an option to control it. Or just leave it this way, since it's so trivial to implement outside the lib...

[fkhadra]

Indeed, it's trivial to implement it outside the library. It also give more flexibility IMHO

[smashercosmo]

Thx for taking time to discuss the issue. I have realized that I'm fine with user land solution. So, I guess issue can be closed)