Material-ui: Snackbar always calls onClose when window regains focus

[drewgaze]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

In MUI v3 losing focus of the window would stall the timer for a snackbar and then resume when focus was returned to the window.

Current Behavior 😯

In MUI v4, regardless of whether or not the snackbar is open, onClose is automatically called whenever a window with a snackbar loses and then regains focus unless disableWindowBlurListener is set, which sacrifices the pause/resume of the timeout functionality.

Steps to Reproduce 🕹

Link: https://codesandbox.io/embed/createreactapp-l9k45

1. Load the sandbox
2. Open another window and give it focus
3. Click back into the sandbox's browser content
4. Observe the console indicating that onClose has been called

Context 🔦

Currently this is causing my app to erroneously fire notification dismiss actions.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.1 |
| React | v16.8.6 |
| React-DOM | v16.8.6 |

[oliviertassinari]

@drewgaze I fail to see a problem. The only close event I see is with a clickaway reason, which is legit.

Could you provide more information?

[drewgaze]

It's a change in behavior from the v3 version of this component. I can handle it in my own code so that onClose is only called if the Snackbar is open but I don't understand if this change is intentional.

Here's a video that hopefully demonstrates the issue better.

[oliviertassinari]

@drewgaze Ok thanks, I can reproduce the problem. It's an issue with the hook logic. I don't understand why it works with v3, but anyway, what do you think of this fix? Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 327622d1b..b92cc5b9c 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -149,7 +149,9 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   );

   React.useEffect(() => {
-    if (open) setAutoHideTimer();
+    if (open) {
+      setAutoHideTimer();
+    }

     return () => {
       clearTimeout(timerAutoHide.current);
@@ -203,7 +205,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   };

   React.useEffect(() => {
-    if (!disableWindowBlurListener) {
+    if (!disableWindowBlurListener && open) {
       window.addEventListener('focus', handleResume);
       window.addEventListener('blur', handlePause);

@@ -214,7 +216,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     }

     return undefined;
-  }, [disableWindowBlurListener, handleResume]);
+  }, [disableWindowBlurListener, handleResume, open]);

   // So we only render active snackbars.
   if (!open && exited) {

cc @joshwooding

[oliviertassinari]

This problem also happens to reset the cookie we set in the documentation, displaying the notifications many times.

[joshwooding]

Marking as important since it affects the docs :)

[oliviertassinari]

I'm taking care of it, the notification popup on the documentation is driving me crazy.