fix: reconnect terminal on non-modified key presses (#9686)

code-asher · web-flow · commit 17f9991118c8 · 2023-09-18T07:24:01.000-08:00
* 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
diff --git 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,
