fix: Fixes to the console focus

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>

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);