From 17f9991118c8ae3fc2aaf2677d33387bab6b0d3a Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Mon, 18 Sep 2023 07:24:01 -0800
Subject: [PATCH] fix: reconnect terminal on non-modified key presses (#9686)

* Listen to web terminal keydown on capture

Instead of bubbling.  I think maybe what happens here is that xterm is
capturing key presses and preventing the event from bubbling?  So
setting the listener on the capture phase instead works around this.
Probably would also work to dipsose the terminal.

* Prevent issuing terminal reload when already reloading

I am not sure this actually causes any issues, but might as well.

* Ignore modifier keys for reconnecting terminal
---
 site/src/pages/TerminalPage/TerminalPage.tsx | 41 ++++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index e8e4e4ab25..0cc206cd51 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -470,21 +470,48 @@ const useReloading = (isDisconnected: boolean) => {
 
   // Retry connection on key press when it is disconnected
   useEffect(() => {
-    if (!isDisconnected) {
+    if (!isDisconnected || status === "reloading") {
       return;
     }
 
-    const keyDownHandler = () => {
-      setStatus("reloading");
-      window.location.reload();
+    // Modifier keys should not trigger a reload.
+    const ignoredKeys = [
+      "Alt",
+      "AltGraph",
+      "CapsLock",
+      "Control",
+      "Fn",
+      "FnLock",
+      "Meta",
+      "NumLock",
+      "ScrollLock",
+      "Shift",
+      "Symbol",
+      "SymbolLock",
+    ];
+
+    const keyDownHandler = (event: KeyboardEvent) => {
+      // In addition to ignored keys, avoid reloading while modifiers are held
+      // to cover cases where the terminal unexpectedly tries to reconnect like
+      // when pressing ctrl+w, ctrl+r, and so on.
+      if (
+        !ignoredKeys.includes(event.key) &&
+        !event.altKey &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.shiftKey
+      ) {
+        setStatus("reloading");
+        window.location.reload();
+      }
     };
 
-    document.addEventListener("keydown", keyDownHandler);
+    document.addEventListener("keydown", keyDownHandler, true);
 
     return () => {
-      document.removeEventListener("keydown", keyDownHandler);
+      document.removeEventListener("keydown", keyDownHandler, true);
     };
-  }, [isDisconnected]);
+  }, [status, isDisconnected]);
 
   return {
     status,