From aa24438edff615d6a63a53fc508b6e146d5c5800 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Mon, 9 Mar 2026 16:53:30 -0700
Subject: [PATCH] Fix slider focus stealing keyboard shortcuts after
 interaction

---
 src/client/InputHandler.ts                 | 2 +-
 src/client/graphics/layers/ControlPanel.ts | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts
index 85c928f5c..778d284c4 100644
--- a/src/client/InputHandler.ts
+++ b/src/client/InputHandler.ts
@@ -671,7 +671,7 @@ export class InputHandler {
     }
     if (element.tagName === "INPUT") {
       const input = element as HTMLInputElement;
-      if (input.id === "attack-ratio" && input.type === "range") {
+      if (input.type === "range") {
         return false;
       }
       return true;
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 5210a1995..dd154e9d9 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -125,11 +125,16 @@ export class ControlPanel extends LitElement implements Layer {
   }
 
   private handleRatioSliderInput(e: Event) {
-    const value = Number((e.target as HTMLInputElement).value);
+    const input = e.target as HTMLInputElement;
+    const value = Number(input.value);
     this.attackRatio = value / 100;
     this.onAttackRatioChange(this.attackRatio);
   }
 
+  private handleRatioSliderPointerUp(e: Event) {
+    (e.target as HTMLInputElement).blur();
+  }
+
   private calculateTroopBar(): { greenPercent: number; orangePercent: number } {
     const base = Math.max(this._maxTroops, 1);
     const greenPercentRaw = (this._troops / base) * 100;
@@ -304,6 +309,7 @@ export class ControlPanel extends LitElement implements Layer {
           max="100"
           .value=${String(Math.round(this.attackRatio * 100))}
           @input=${(e: Event) => this.handleRatioSliderInput(e)}
+          @pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
           class="flex-1 h-2 accent-blue-500 cursor-pointer"
         />
       </div>
@@ -347,6 +353,7 @@ export class ControlPanel extends LitElement implements Layer {
             max="100"
             .value=${String(Math.round(this.attackRatio * 100))}
             @input=${(e: Event) => this.handleRatioSliderInput(e)}
+            @pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
             class="w-full h-1.5 accent-blue-500 cursor-pointer"
           />
         </div>