From 52149292184a42f29f67485818f4646554b5deef Mon Sep 17 00:00:00 2001
From: "irvingouj@Devolutions" <jou@devolutions.net>
Date: Tue, 4 Mar 2025 20:03:42 -0500
Subject: [PATCH] fix(web): allow keyboard input even if the mouse is off the
 area of canvas (#685)

---
 .../iron-remote-gui/src/iron-remote-gui.svelte    | 15 +++++++++++----
 .../src/services/wasm-bridge.service.ts           | 10 +---------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/web-client/iron-remote-gui/src/iron-remote-gui.svelte b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
index 0d76a425..8cc2ffe6 100644
--- a/web-client/iron-remote-gui/src/iron-remote-gui.svelte
+++ b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
@@ -23,7 +23,14 @@
     } = $props();
 
     let isVisible = $state(false);
-    let capturingInputs = $state(false);
+    let capturingInputs = () => {
+        loggingService.info(`
+            capturingInputs: ${document.activeElement === canvas}
+            current active element: ${document.activeElement}
+        `);
+
+        return document.activeElement === canvas;
+    };
 
     let inner: HTMLDivElement;
     let wrapper: HTMLDivElement;
@@ -367,7 +374,7 @@
         userInteractionListeners();
 
         function captureKeys(evt: KeyboardEvent) {
-            if (capturingInputs) {
+            if (capturingInputs()) {
                 if (ffPostponeKeyboardEvents) {
                     evt.preventDefault();
                     ffDelayedKeyboardEvents.push(evt);
@@ -599,12 +606,11 @@
     }
 
     function setMouseIn(evt: MouseEvent) {
-        capturingInputs = true;
+        canvas.focus();
         wasmService.mouseIn(evt);
     }
 
     function setMouseOut(evt: MouseEvent) {
-        capturingInputs = false;
         wasmService.mouseOut(evt);
     }
 
@@ -699,6 +705,7 @@
                 oncontextmenu={(event) => event.preventDefault()}
                 onwheel={mouseWheel}
                 id="renderer"
+                tabindex="0"
             ></canvas>
         </div>
     </div>
diff --git a/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts b/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts
index 7f4b5328..554d9f4f 100644
--- a/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts
+++ b/web-client/iron-remote-gui/src/services/wasm-bridge.service.ts
@@ -40,7 +40,6 @@ export class WasmBridgeService {
     private sessionEvent: Subject<SessionEvent> = new Subject();
     private scale: BehaviorSubject<ScreenScale> = new BehaviorSubject(ScreenScale.Fit as ScreenScale);
     private canvas?: HTMLCanvasElement;
-    private keyboardActive: boolean = false;
     private keyboardUnicodeMode: boolean = false;
     private backendSupportsUnicodeKeyboardShortcuts: boolean | undefined = undefined;
     private onRemoteClipboardChanged?: OnRemoteClipboardChanged;
@@ -98,18 +97,14 @@ export class WasmBridgeService {
 
     mouseIn(event: MouseEvent) {
         this.syncModifier(event);
-        this.keyboardActive = true;
     }
 
     mouseOut(_event: MouseEvent) {
-        this.keyboardActive = false;
         this.releaseAllInputs();
     }
 
     sendKeyboardEvent(evt: KeyboardEvent) {
-        if (this.keyboardActive) {
-            this.sendKeyboard(evt);
-        }
+        this.sendKeyboard(evt);
     }
 
     shutdown() {
@@ -125,9 +120,6 @@ export class WasmBridgeService {
     }
 
     updateMousePosition(position: MousePosition) {
-        if (!this.keyboardActive) {
-            this.keyboardActive = true;
-        }
         this.doTransactionFromDeviceEvents([DeviceEvent.new_mouse_move(position.x, position.y)]);
         this.mousePosition.next(position);
     }