From 011bcf15c7eba8f7dcd45731f8e434b2eccf781e Mon Sep 17 00:00:00 2001
From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Date: Thu, 9 Sep 2021 21:44:59 +0300
Subject: [PATCH] fix: close overlay on disconnection (#3825)

---
 client-src/index.js                           |  12 +-
 .../overlay.test.js.snap.webpack4             | 170 ++++++++++++------
 .../overlay.test.js.snap.webpack5             | 170 ++++++++++++------
 test/e2e/overlay.test.js                      |  89 +++++++--
 4 files changed, 322 insertions(+), 119 deletions(-)
diff --git a/client-src/index.js b/client-src/index.js
index 5dd697e983..63251d7992 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -161,12 +161,12 @@ const onSocketMessage = {
       log.warn(strippedWarnings[i]);
     }
 
-    const needShowOverlay =
+    const needShowOverlayForWarnings =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.warnings;
 
-    if (needShowOverlay) {
+    if (needShowOverlayForWarnings) {
       show(warnings, "warnings");
     }
 
@@ -185,12 +185,12 @@ const onSocketMessage = {
       log.error(strippedErrors[i]);
     }
 
-    const needShowOverlay =
+    const needShowOverlayForErrors =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.errors;
 
-    if (needShowOverlay) {
+    if (needShowOverlayForErrors) {
       show(errors, "errors");
     }
   },
@@ -200,6 +200,10 @@ const onSocketMessage = {
   close() {
     log.info("Disconnected!");
 
+    if (options.overlay) {
+      hide();
+    }
+
     sendMessage("Close");
   },
 };
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index 804589bc46..d8a4d50c72 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
 exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = `
 "<body>
   <div
@@ -314,35 +342,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 "
 `;
 
-exports[`overlay should not show on a warning when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on a warning when "client.overlay.warnings" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay.errors" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -391,7 +391,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -410,7 +410,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -474,7 +474,7 @@ exports[`overlay should show on a warning and error for initial compilation: ove
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -493,7 +493,77 @@ exports[`overlay should show on a warning and error for initial compilation: pag
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should show a warning for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -537,7 +607,7 @@ exports[`overlay should show on a warning for initial compilation: overlay html
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: page html 1`] = `
+exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -556,7 +626,7 @@ exports[`overlay should show on a warning for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -600,7 +670,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -619,7 +689,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": page
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -663,7 +733,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -682,7 +752,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -726,7 +796,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -745,7 +815,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -802,7 +872,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -821,7 +891,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -865,7 +935,7 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: page html 1`] = `
+exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -884,7 +954,7 @@ exports[`overlay should show on an error for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -928,7 +998,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -947,7 +1017,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": page h
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -991,7 +1061,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -1010,7 +1080,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -1054,7 +1124,7 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index 6aac366d4c..b92f1d39db 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
 exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = `
 "<body>
   <div
@@ -314,35 +342,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 "
 `;
 
-exports[`overlay should not show on a warning when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on a warning when "client.overlay.warnings" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay.errors" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -391,7 +391,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -410,7 +410,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -474,7 +474,7 @@ exports[`overlay should show on a warning and error for initial compilation: ove
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -493,7 +493,77 @@ exports[`overlay should show on a warning and error for initial compilation: pag
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should show a warning for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -537,7 +607,7 @@ exports[`overlay should show on a warning for initial compilation: overlay html
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: page html 1`] = `
+exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -556,7 +626,7 @@ exports[`overlay should show on a warning for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -600,7 +670,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -619,7 +689,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": page
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -663,7 +733,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -682,7 +752,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -726,7 +796,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -745,7 +815,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -802,7 +872,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -821,7 +891,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -865,7 +935,7 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: page html 1`] = `
+exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -884,7 +954,7 @@ exports[`overlay should show on an error for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -928,7 +998,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -947,7 +1017,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": page h
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -991,7 +1061,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -1010,7 +1080,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -1054,7 +1124,7 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index e55da085fe..90f8c41697 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -43,7 +43,7 @@ class WarningPlugin {
 }
 
 describe("overlay", () => {
-  it("should show on a warning for initial compilation", async () => {
+  it("should show a warning for initial compilation", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -79,7 +79,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on an error for initial compilation", async () => {
+  it("should show an error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -115,7 +115,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on a warning and error for initial compilation", async () => {
+  it("should show a warning and error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -155,7 +155,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on an ansi formatted error for initial compilation", async () => {
+  it("should show an ansi formatted error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin("[0m [90m 18 |[39m           [33mRender[39m [33mansi formatted text[39m[0m").apply(
@@ -193,7 +193,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on a warning and error for initial compilation and protects against xss", async () => {
+  it("should show a warning and error for initial compilation and protects against xss", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin("<strong>strong</strong>").apply(compiler);
@@ -456,7 +456,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on a warning when "client.overlay" is "false"', async () => {
+  it('should not show a warning when "client.overlay" is "false"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -489,7 +489,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on a warning when "client.overlay.warnings" is "false"', async () => {
+  it('should not show a warning when "client.overlay.warnings" is "false"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -524,7 +524,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay" is "true"', async () => {
+  it('should show a warning when "client.overlay" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -563,7 +563,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay.warnings" is "true"', async () => {
+  it('should show a warning when "client.overlay.warnings" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -604,7 +604,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay.errors" is "true"', async () => {
+  it('should show a warning when "client.overlay.errors" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -645,7 +645,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on an error when "client.overlay" is "false"', async () => {
+  it('should not show an error when "client.overlay" is "false"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -678,7 +678,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on an error when "client.overlay.errors" is "false"', async () => {
+  it('should not show an error when "client.overlay.errors" is "false"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -713,7 +713,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay" is "true"', async () => {
+  it('should show an error when "client.overlay" is "true"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -752,7 +752,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay.errors" is "true"', async () => {
+  it('should show an error when "client.overlay.errors" is "true"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -793,7 +793,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay.warnings" is "true"', async () => {
+  it('should show an error when "client.overlay.warnings" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -833,4 +833,63 @@ describe("overlay", () => {
     await browser.close();
     await server.stop();
   });
+
+  it("should show a warning and hide them after closing connection", async () => {
+    const compiler = webpack(config);
+
+    new WarningPlugin().apply(compiler);
+
+    const devServerOptions = { port };
+    const server = new Server(devServerOptions, compiler);
+
+    await server.start();
+
+    const { page, browser } = await runBrowser();
+
+    const consoleMessages = [];
+
+    page.on("console", (message) => {
+      consoleMessages.push(message.text());
+    });
+
+    await page.goto(`http://localhost:${port}/main`, {
+      waitUntil: "networkidle0",
+    });
+
+    const pageHtml = await page.evaluate(() => document.body.outerHTML);
+    const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+    const overlayFrame = await overlayHandle.contentFrame();
+    const overlayHtml = await overlayFrame.evaluate(
+      () => document.body.outerHTML
+    );
+
+    expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot(
+      "page html"
+    );
+    expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot(
+      "overlay html"
+    );
+
+    await server.stop();
+
+    await new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (consoleMessages.includes("[webpack-dev-server] Disconnected!")) {
+          clearInterval(interval);
+
+          resolve();
+        }
+      }, 100);
+    });
+
+    const pageHtmlAfterClose = await page.evaluate(
+      () => document.body.outerHTML
+    );
+
+    expect(
+      prettier.format(pageHtmlAfterClose, { parser: "html" })
+    ).toMatchSnapshot("page html");
+
+    await browser.close();
+  });
 });
