From 2c4cd7712e69abd08b663c04e717ce1bd0a24daa Mon Sep 17 00:00:00 2001
From: Kashargul <144968721+Kashargul@users.noreply.github.com>
Date: Sun, 28 Sep 2025 21:10:52 +0200
Subject: [PATCH] Fix keycombo Modal not working after clear (#93146)

## About The Pull Request
Keycombo has a button to clear the assigned key. Doing so says that one
can press a key to record it. The way autofocus works though is that
this only ever works once on the first window opening. Not if one wants
to reassign a hotkey.
## Why It's Good For The Game
## Changelog
:cl:
fix: keycombo modal only allowing an input on the first opening
/:cl:
---
 .../tgui/interfaces/KeyComboModal.tsx         | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/KeyComboModal.tsx b/tgui/packages/tgui/interfaces/KeyComboModal.tsx
index d31677e8a14..e6b400cfe95 100644
--- a/tgui/packages/tgui/interfaces/KeyComboModal.tsx
+++ b/tgui/packages/tgui/interfaces/KeyComboModal.tsx
@@ -1,10 +1,9 @@
-import { useState } from 'react';
-import { Autofocus, Box, Button, Section, Stack } from 'tgui-core/components';
+import { useEffect, useRef, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import { Box, Button, Section, Stack } from 'tgui-core/components';
 import { isEscape, KEY } from 'tgui-core/keys';
 import type { BooleanLike } from 'tgui-core/react';
-
-import { useBackend } from '../backend';
-import { Window } from '../layouts';
 import { InputButtons } from './common/InputButtons';
 import { Loader } from './common/Loader';
 
@@ -75,6 +74,13 @@ export function KeyComboModal(props) {
   const { init_value, large_buttons, message = '', title, timeout } = data;
   const [input, setInput] = useState(init_value);
   const [binding, setBinding] = useState(true);
+  const focusRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (binding && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [binding]);
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
     if (!binding) {
@@ -93,7 +99,9 @@ export function KeyComboModal(props) {
       setValue(formatKeyboardEvent(event));
       setBinding(false);
       return;
-    } else if (isEscape(event.key)) {
+    }
+
+    if (isEscape(event.key)) {
       setValue(init_value);
       setBinding(false);
       return;
@@ -118,7 +126,7 @@ export function KeyComboModal(props) {
       {timeout && <Loader value={timeout} />}
       <Window.Content onKeyDown={handleKeyDown}>
         <Section fill>
-          <Autofocus />
+          <div ref={focusRef} tabIndex={-1} />
           <Stack fill vertical>
             <Stack.Item grow>
               <Box color="label">{message}</Box>