Ignore modifier keys for reconnecting terminal

code-asher · code-asher · commit 85ffce821606 · 2023-09-14T14:10:03.000-08:00
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -474,15 +474,56 @@ const useReloading = (isDisconnected: boolean) => {
       return;
     }
 
-    const keyDownHandler = () => {
-      setStatus("reloading");
-      window.location.reload();
+    // Keep track of modifier keys since we want to avoid reconnecting while
+    // modifiers are held.  This covers cases where the terminal unexpectedly
+    // tries to reconnect like when pressing ctrl+w, ctrl+r, and so on.  This
+    // will not work if you pressed a modifier before the disconnect and are
+    // still holding it; if we need to account for that we will need to listen
+    // for modifier keys while connected as well.
+    const modifierKeyState: Record<string, boolean> = {
+      Alt: false,
+      AltGraph: false,
+      CapsLock: false,
+      Control: false,
+      Fn: false,
+      FnLock: false,
+      Meta: false,
+      NumLock: false,
+      ScrollLock: false,
+      Shift: false,
+      Symbol: false,
+      SymbolLock: false,
+    };
+
+    const isModifier = (event: KeyboardEvent): boolean => {
+      return typeof modifierKeyState[event.key] !== "undefined";
+    };
+
+    const isModified = (): boolean => {
+      return Object.values(modifierKeyState).includes(true);
+    };
+
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (isModifier(event)) {
+        modifierKeyState[event.key] = true;
+      } else if (!isModified()) {
+        setStatus("reloading");
+        window.location.reload();
+      }
+    };
+
+    const keyUpHandler = (event: KeyboardEvent) => {
+      if (isModifier(event)) {
+        modifierKeyState[event.key] = false;
+      }
     };
 
     document.addEventListener("keydown", keyDownHandler, true);
+    document.addEventListener("keyup", keyUpHandler, true);
 
     return () => {
       document.removeEventListener("keydown", keyDownHandler, true);
+      document.removeEventListener("keyup", keyUpHandler, true);
     };
   }, [status, isDisconnected]);
 
