fix(web): allow keyboard input even if the mouse is off the area of canvas (#685)

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>

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