Animations are being paused even with my focus still on the page

[georgekaran]

Do you want to request a feature or report a bug? BUG 🐞

What is the current behavior? Toast animations are being paused even with my focus still on the page.

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. Open sandbox: https://codesandbox.io/s/red-rgb-whcuxv?file=/index.js
2. Select any option inside the selector
3. Select another option inside the selector
4. See how the first notification will stop running even with my focus still on the page

What is the expected behavior? The animation on the first notification should not be paused.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 18.2

Chrome 111 and Firefox 111

[georgekaran]

I submitted a PR for a more robust approach with Page Visibility API.

[rvieceli]

I had the same problem when using Radix UI popover with Portal Animations are paused until I close the popover.

[georgekaran]

Hello @fkhadra, could you kindly check this out when you have a moment?