I've been using MUI Snackbar and its autoHideDuration option but while testing I noticed that when the page is out of focus, like when you go to another tab, it's paused and the snackbar stays displayed until you focus on the page again.
You can even test this out on the MUI page examples: https://mui.com/material-ui/react-snackbar/
Just have two tabs side by side on the screen, trigger the snackbar, click into the other tab and the snackbar will stay displayed until you click back on the MUI page.
Is this just a side effect of some implementation detail that can't be avoided? Any way around this? I can reproduce this in Chrome and FF.
You can achieve the behaviour you are describing.
Simply set the property disableWindowBlurListener
on the Snackbar to true
:
<Snackbar open autoHideDuration={ 3000 } disableWindowBlurListener>
...
</Snackbar>
Here is the documentation.