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
🆑
fix: keycombo modal only allowing an input on the first opening
/🆑
This commit is contained in:
Kashargul
2025-09-28 21:10:52 +02:00
committed by GitHub
parent 8516d44fe1
commit 2c4cd7712e
@@ -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>