From 766dcabfdef91e195ba074095d652fedc380a37c Mon Sep 17 00:00:00 2001
From: mrhid6 <mrhid6@gmail.com>
Date: Tue, 28 Jul 2026 12:02:48 +0100
Subject: [PATCH] fix: Fixes to the console focus

---
 web/app/(app)/servers/[id]/console/page.tsx |  7 +++-
 web/lib/guacConsole.ts                      | 38 ++++++++++++++++++---
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/app/(app)/servers/[id]/console/page.tsx b/web/app/(app)/servers/[id]/console/page.tsx
index 8705175..a9109e5 100644
--- a/web/app/(app)/servers/[id]/console/page.tsx
+++ b/web/app/(app)/servers/[id]/console/page.tsx
@@ -19,6 +19,7 @@ export default function ServerConsolePage() {
         disconnect: () => void;
         setScale: (scale: number) => void;
         resize: (width: number, height: number) => void;
+        focus: () => void;
     } | null>(null);
 
     const [protocol, setProtocol] = useState<string>(searchParams.get("protocol") || "");
@@ -274,7 +275,11 @@ export default function ServerConsolePage() {
                     <label className="text-sm text-text-secondary">Scale</label>
                     <select
                         value={zoom}
-                        onChange={(e) => setZoom(Number(e.target.value))}
+                        onChange={(e) => {
+                            setZoom(Number(e.target.value));
+                            e.target.blur();
+                            connectionRef.current?.focus();
+                        }}
                         className="rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
                     >
                         <option value={0.5}>50%</option>
diff --git a/web/lib/guacConsole.ts b/web/lib/guacConsole.ts
index e0962fb..d96e10b 100644
--- a/web/lib/guacConsole.ts
+++ b/web/lib/guacConsole.ts
@@ -6,7 +6,12 @@ export function openConsole(
   container: HTMLElement,
   wsUrl: string,
   connectData = ""
-): { disconnect: () => void; setScale: (scale: number) => void; resize: (width: number, height: number) => void } {
+): {
+  disconnect: () => void;
+  setScale: (scale: number) => void;
+  resize: (width: number, height: number) => void;
+  focus: () => void;
+} {
   
   
   const tunnel = new Guacamole.WebSocketTunnel(wsUrl);
@@ -16,6 +21,7 @@ export function openConsole(
   container.appendChild(client.getDisplay().getElement());
   
   container.tabIndex = 0;
+  container.style.outline = "none";
 
   client.connect(connectData);
 
@@ -48,18 +54,40 @@ export function openConsole(
   keyboard.onkeyup = (k: number) => client.sendKeyEvent(0, k);
   
   
-  const refocus = () => container.focus();
-  container.addEventListener("mousedown", refocus);
-  container.focus();
+
+
+
+
+  const refocus = () => {
+    if (document.activeElement !== container) container.focus({ preventScroll: true });
+  };
+  container.addEventListener("pointerdown", refocus, true);
+  container.addEventListener("mousedown", refocus, true);
+  container.addEventListener("touchstart", refocus, true);
+
+
+
+  const onBlur = () => {
+    if (typeof keyboard.reset === "function") keyboard.reset();
+  };
+  container.addEventListener("blur", onBlur);
+  window.addEventListener("blur", onBlur);
+
+  container.focus({ preventScroll: true });
 
   return {
     disconnect() {
-      container.removeEventListener("mousedown", refocus);
+      container.removeEventListener("pointerdown", refocus, true);
+      container.removeEventListener("mousedown", refocus, true);
+      container.removeEventListener("touchstart", refocus, true);
+      container.removeEventListener("blur", onBlur);
+      window.removeEventListener("blur", onBlur);
       keyboard.onkeydown = null;
       keyboard.onkeyup = null;
       if (typeof keyboard.reset === "function") keyboard.reset();
       client.disconnect();
     },
+    focus: refocus,
     setScale(s: number) {
       scale = s;
       display.scale(s);