From cb25b94cb782b038f4ebbe7c0886db837af7d4bc Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 12:17:35 +0200
Subject: [PATCH] fix: prevent special key buttons from stealing focus

- Add tabIndex={-1} to all special key buttons to prevent focus
- Add onFocus handler to immediately blur if focused
- Terminal focus stays intact when tapping special keys
---
 apps/web/src/components/special-keys-panel.tsx | 4 ++++
 apps/web/src/components/special-keys-strip.tsx | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/apps/web/src/components/special-keys-panel.tsx b/apps/web/src/components/special-keys-panel.tsx
index 0136f54..a7c368a 100644
--- a/apps/web/src/components/special-keys-panel.tsx
+++ b/apps/web/src/components/special-keys-panel.tsx
@@ -62,7 +62,9 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
               key={key}
               className="special-key-button"
               onPointerDown={(e) => handlePointerDown(e, key)}
+              onFocus={(e) => e.target.blur()}
               type="button"
+              tabIndex={-1}
             >
               {label}
             </button>
@@ -75,7 +77,9 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
               key={key}
               className="special-key-button"
               onPointerDown={(e) => handlePointerDown(e, key)}
+              onFocus={(e) => e.target.blur()}
               type="button"
+              tabIndex={-1}
             >
               {label}
             </button>
diff --git a/apps/web/src/components/special-keys-strip.tsx b/apps/web/src/components/special-keys-strip.tsx
index 563dced..70e77df 100644
--- a/apps/web/src/components/special-keys-strip.tsx
+++ b/apps/web/src/components/special-keys-strip.tsx
@@ -46,7 +46,9 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
           key={key}
           className="special-key-button"
           onPointerDown={(e) => handlePointerDown(e, key)}
+          onFocus={(e) => e.target.blur()}
           type="button"
+          tabIndex={-1}
           aria-label={`Send ${label}`}
         >
           {label}
@@ -56,7 +58,9 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
         <button
           className="special-key-button special-key-more"
           onPointerDown={handleMorePointerDown}
+          onFocus={(e) => e.target.blur()}
           type="button"
+          tabIndex={-1}
           aria-label="More special keys"
         >
           More