tgui say focus fix (#17568)

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))

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<keyof typeof WindowSize, number> = {
-  Small: 1,
-  Medium: 2,
-  Large: 3,
-  Max: 20,
-  Width: 360,
-  MaxWidth: 800,
-} as const;
-
 export function TguiSay() {
   const innerRef = useRef<HTMLTextAreaElement>(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<HTMLButtonElement>): void {
+  function handleButtonClick(event: React.MouseEvent<HTMLButtonElement>): void {
     isDragging.current = true;
 
     setTimeout(() => {
@@ -207,7 +191,7 @@ export function TguiSay() {
     );
   }
 
-  function handleInput(event: FormEvent<HTMLTextAreaElement>): void {
+  function handleInput(event: React.FormEvent<HTMLTextAreaElement>): void {
     const iterator = channelIterator.current;
     let newValue = event.currentTarget.value;
 
@@ -232,7 +216,9 @@ export function TguiSay() {
     setValue(newValue);
   }
 
-  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+  function handleKeyDown(
+    event: React.KeyboardEvent<HTMLTextAreaElement>,
+  ): 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() {
         <textarea
           spellCheck
           autoCorrect="off"
-          className={`textarea textarea-${theme}`}
+          className={classes([
+            'textarea',
+            `textarea-${theme}`,
+            value.length > LineLength.Large && 'textarea-large',
+          ])}
           maxLength={maxLength}
           onInput={handleInput}
           onKeyDown={handleKeyDown}
           ref={innerRef}
-          rows={ROWS[size] || 1}
           value={value}
         />
         <button

tgui/packages/tgui-say/constants.ts

@@ -12,6 +12,7 @@ export enum WindowSize {
 export enum LineLength {
   Small = 22,
   Medium = 45,
+  Large = 68,
 }
 
 /**

tgui/packages/tgui-say/helpers.ts

@@ -13,9 +13,6 @@ export function windowOpen(
 ): void {
   setWindowVisibility(true, width, height, scale);
   Byond.sendMessage('open', { channel });
-  Byond.winset('tgui_say.browser', {
-    focus: true,
-  });
 }
 
 /**

tgui/packages/tgui-say/styles/main.scss

@@ -2,13 +2,7 @@
 @use 'sass:color';
 @use './colors.scss';
 
-// Core styles
 @include meta.load-css('~tgui/styles/reset');
-// Atomic styles
-@include meta.load-css('~tgui/styles/atomic/text.scss');
-// External styles
-@include meta.load-css('~tgui-core/styles/components/TextArea');
-// Local styles
 @include meta.load-css('./styles.scss');
 
 @each $channel, $color in colors.$channel-map {

tgui/packages/tgui-say/styles/styles.scss

@@ -28,6 +28,7 @@
 
 .window-lightMode {
   background-color: colors.$lightMode;
+  border: 2px solid colors.$lightBorder;
 }
 
 /** Window sizes */
@@ -135,11 +136,10 @@
   font-weight: bold;
   outline: none;
   overflow: hidden;
-  padding: 0.1rem 0.2rem;
+  padding: 0.1rem;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 100%;
   &:hover {
     background-color: color.adjust(
       colors.$button,
@@ -166,6 +166,7 @@
   margin: 0.1rem 0 0 0.4rem;
   outline: none;
   resize: none;
+  overflow: hidden;
   scrollbar-width: thin;
   scrollbar-color: color.scale(
       colors.$button,
@@ -173,3 +174,7 @@
     )
     transparent;
 }
+
+.textarea-large {
+  overflow-y: scroll;
+}