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
This commit is contained in:
Fusion
2026-05-24 12:17:35 +02:00
parent f5c2c95af0
commit cb25b94cb7
2 changed files with 8 additions and 0 deletions
@@ -62,7 +62,9 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
key={key} key={key}
className="special-key-button" className="special-key-button"
onPointerDown={(e) => handlePointerDown(e, key)} onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button" type="button"
tabIndex={-1}
> >
{label} {label}
</button> </button>
@@ -75,7 +77,9 @@ export const SpecialKeysPanel: React.FC<SpecialKeysPanelProps> = ({
key={key} key={key}
className="special-key-button" className="special-key-button"
onPointerDown={(e) => handlePointerDown(e, key)} onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button" type="button"
tabIndex={-1}
> >
{label} {label}
</button> </button>
@@ -46,7 +46,9 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
key={key} key={key}
className="special-key-button" className="special-key-button"
onPointerDown={(e) => handlePointerDown(e, key)} onPointerDown={(e) => handlePointerDown(e, key)}
onFocus={(e) => e.target.blur()}
type="button" type="button"
tabIndex={-1}
aria-label={`Send ${label}`} aria-label={`Send ${label}`}
> >
{label} {label}
@@ -56,7 +58,9 @@ export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
<button <button
className="special-key-button special-key-more" className="special-key-button special-key-more"
onPointerDown={handleMorePointerDown} onPointerDown={handleMorePointerDown}
onFocus={(e) => e.target.blur()}
type="button" type="button"
tabIndex={-1}
aria-label="More special keys" aria-label="More special keys"
> >
More More