From 20a993be2d0d8f8dcf9c1a9af4da81795c64dd46 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Mon, 21 Apr 2025 20:06:08 +0200 Subject: [PATCH] tgui say focus fix (#17568) --- code/modules/mob/typing_indicator.dm | 4 ++ tgui/packages/tgui-say/TguiSay.tsx | 55 ++++++++--------------- tgui/packages/tgui-say/constants.ts | 1 + tgui/packages/tgui-say/helpers.ts | 3 -- tgui/packages/tgui-say/styles/main.scss | 6 --- tgui/packages/tgui-say/styles/styles.scss | 9 +++- 6 files changed, 31 insertions(+), 47 deletions(-) diff --git a/code/modules/mob/typing_indicator.dm b/code/modules/mob/typing_indicator.dm index 102c002e867..ce0bc352d5e 100644 --- a/code/modules/mob/typing_indicator.dm +++ b/code/modules/mob/typing_indicator.dm @@ -17,6 +17,7 @@ if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say)) winset(src, null, "command=[client.tgui_say_create_open_command(SAY_CHANNEL)]") + winset(src, "tgui_say.browser", "focus=true") return client?.start_thinking() @@ -33,6 +34,7 @@ if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say) && client?.prefs?.read_preference(/datum/preference/toggle/tgui_say_emotes)) winset(src, null, "command=[client.tgui_say_create_open_command(ME_CHANNEL)]") + winset(src, "tgui_say.browser", "focus=true") return client?.start_thinking() @@ -49,6 +51,7 @@ if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say)) winset(src, null, "command=[client.tgui_say_create_open_command(WHIS_CHANNEL)]") + winset(src, "tgui_say.browser", "focus=true") return if(client?.prefs?.read_preference(/datum/preference/toggle/show_typing_indicator_subtle)) @@ -67,6 +70,7 @@ if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say) && client?.prefs?.read_preference(/datum/preference/toggle/tgui_say_emotes)) winset(src, null, "command=[client.tgui_say_create_open_command(SUBTLE_CHANNEL)]") + winset(src, "tgui_say.browser", "focus=true") return if(client?.prefs?.read_preference(/datum/preference/toggle/show_typing_indicator_subtle)) diff --git a/tgui/packages/tgui-say/TguiSay.tsx b/tgui/packages/tgui-say/TguiSay.tsx index e6408c63303..40b2e49b2e4 100644 --- a/tgui/packages/tgui-say/TguiSay.tsx +++ b/tgui/packages/tgui-say/TguiSay.tsx @@ -1,13 +1,6 @@ import './styles/main.scss'; -import { - type FormEvent, - type KeyboardEvent, - type MouseEvent, - useEffect, - useRef, - useState, -} from 'react'; +import { useEffect, useRef, useState } from 'react'; import { dragStartHandler } from 'tgui/drag'; import { isEscape, KEY } from 'tgui-core/keys'; import { clamp } from 'tgui-core/math'; @@ -37,15 +30,6 @@ type ByondProps = { scale: BooleanLike; }; -const ROWS: Record = { - Small: 1, - Medium: 2, - Large: 3, - Max: 20, - Width: 360, - MaxWidth: 800, -} as const; - export function TguiSay() { const innerRef = useRef(null); const channelIterator = useRef(new ChannelIterator()); @@ -61,8 +45,8 @@ export function TguiSay() { const [currentPrefix, setCurrentPrefix] = useState< keyof typeof RADIO_PREFIXES | null >(null); - const [size, setSize] = useState(WindowSize.Small); const [maxLength, setMaxLength] = useState(4096); + const [size, setSize] = useState(WindowSize.Small); const [lightMode, setLightMode] = useState(false); const [value, setValue] = useState(''); @@ -113,7 +97,7 @@ export function TguiSay() { } } - function handleButtonClick(event: MouseEvent): void { + function handleButtonClick(event: React.MouseEvent): void { isDragging.current = true; setTimeout(() => { @@ -207,7 +191,7 @@ export function TguiSay() { ); } - function handleInput(event: FormEvent): void { + function handleInput(event: React.FormEvent): void { const iterator = channelIterator.current; let newValue = event.currentTarget.value; @@ -232,7 +216,9 @@ export function TguiSay() { setValue(newValue); } - function handleKeyDown(event: KeyboardEvent): void { + function handleKeyDown( + event: React.KeyboardEvent, + ): void { if (event.getModifierState('AltGraph')) return; switch (event.key) { @@ -311,24 +297,18 @@ export function TguiSay() { function handleOpen(data: ByondOpen): void { setSize(minimumHeight.current); - const { channel } = data; - const iterator = channelIterator.current; - // Catches the case where the modal is already open - if (iterator.isSay()) { - iterator.set(channel); - } + channelIterator.current.set(data.channel); - setButtonContent(iterator.current()); + setCurrentPrefix(null); + setButtonContent(channelIterator.current.current()); windowOpen( - iterator.current(), + channelIterator.current.current(), minimumWidth.current, minimumHeight.current, scale.current, ); - const input = innerRef.current; - setTimeout(() => { - input?.focus(); - }, 1); + + innerRef.current?.focus(); } function handleProps(data: ByondProps): void { @@ -372,8 +352,8 @@ export function TguiSay() { newSize = clamp(newSize, minimumHeight.current, WindowSize.Max); if (size !== newSize) { - setSize(newSize); windowSet(minimumWidth.current, newSize, scale.current); + setSize(newSize); } }, [value]); @@ -410,12 +390,15 @@ export function TguiSay() {