[no gbp] Fixes tgui say input focus, again (#90608)

code/datums/keybinding/communication.dm

@@ -11,7 +11,8 @@
 	. = ..()
 	if(.)
 		return
-	winset(user, null, "command=[user.tgui_say_create_open_command(SAY_CHANNEL)]")
+	winset(user, null, "command=[user.tgui_say_create_open_command(SAY_CHANNEL)];")
+	winset(user, "tgui_say.browser", "focus=true")
 	return TRUE
 
 /datum/keybinding/client/communication/radio
@@ -26,6 +27,7 @@
 	if(.)
 		return
 	winset(user, null, "command=[user.tgui_say_create_open_command(RADIO_CHANNEL)]")
+	winset(user, "tgui_say.browser", "focus=true")
 	return TRUE
 
 /datum/keybinding/client/communication/ooc
@@ -39,6 +41,7 @@
 	if(.)
 		return
 	winset(user, null, "command=[user.tgui_say_create_open_command(OOC_CHANNEL)]")
+	winset(user, "tgui_say.browser", "focus=true")
 	return TRUE
 
 /datum/keybinding/client/communication/me
@@ -52,4 +55,5 @@
 	if(.)
 		return
 	winset(user, null, "command=[user.tgui_say_create_open_command(ME_CHANNEL)]")
+	winset(user, "tgui_say.browser", "focus=true")
 	return TRUE

tgui/packages/tgui-say/TguiSay.tsx

@@ -1,13 +1,6 @@
 import './styles/main.scss';
 
-import {
-  FormEvent,
-  KeyboardEvent,
-  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 { BooleanLike, classes } from 'tgui-core/react';
@@ -28,13 +21,6 @@ type ByondProps = {
   scale: BooleanLike;
 };
 
-const ROWS: Record<keyof typeof WindowSize, number> = {
-  Small: 1,
-  Medium: 2,
-  Large: 3,
-  Width: 1, // not used
-} as const;
-
 export function TguiSay() {
   const innerRef = useRef<HTMLTextAreaElement>(null);
   const channelIterator = useRef(new ChannelIterator());
@@ -48,9 +34,9 @@ export function TguiSay() {
   const [currentPrefix, setCurrentPrefix] = useState<
     keyof typeof RADIO_PREFIXES | null
   >(null);
-  const [size, setSize] = useState(WindowSize.Small);
-  const [maxLength, setMaxLength] = useState(1024);
   const [lightMode, setLightMode] = useState(false);
+  const [maxLength, setMaxLength] = useState(1024);
+  const [size, setSize] = useState(WindowSize.Small);
   const [value, setValue] = useState('');
 
   const position = useRef([window.screenX, window.screenY]);
@@ -100,7 +86,7 @@ export function TguiSay() {
     }
   }
 
-  function handleButtonClick(event: MouseEvent<HTMLButtonElement>): void {
+  function handleButtonClick(event: React.MouseEvent<HTMLButtonElement>): void {
     isDragging.current = true;
 
     setTimeout(() => {
@@ -172,7 +158,7 @@ export function TguiSay() {
     messages.current.channelIncrementMsg(iterator.isVisible());
   }
 
-  function handleInput(event: FormEvent<HTMLTextAreaElement>): void {
+  function handleInput(event: React.FormEvent<HTMLTextAreaElement>): void {
     const iterator = channelIterator.current;
     let newValue = event.currentTarget.value;
 
@@ -197,7 +183,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) {
@@ -230,20 +218,14 @@ export function TguiSay() {
   }
 
   function handleOpen(data: ByondOpen): void {
-    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());
-    windowOpen(iterator.current(), scale.current);
+    setCurrentPrefix(null);
+    setButtonContent(channelIterator.current.current());
 
-    const input = innerRef.current;
-    setTimeout(() => {
-      input?.focus();
-    }, 1);
+    windowOpen(channelIterator.current.current(), scale.current);
+
+    innerRef.current?.focus();
   }
 
   function handleProps(data: ByondProps): void {
@@ -279,8 +261,8 @@ export function TguiSay() {
     }
 
     if (size !== newSize) {
-      setSize(newSize);
       windowSet(newSize, scale.current);
+      setSize(newSize);
     }
   }, [value]);
 
@@ -313,13 +295,16 @@ export function TguiSay() {
         </button>
         <textarea
           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}
           spellCheck={false}
-          rows={ROWS[size] || 1}
           value={value}
         />
       </div>

tgui/packages/tgui-say/constants.ts

@@ -9,7 +9,8 @@ export enum WindowSize {
 /** Line lengths for autoexpand */
 export enum LineLength {
   Small = 20,
-  Medium = 40,
+  Medium = 39,
+  Large = 59,
 }
 
 /**

tgui/packages/tgui-say/helpers.ts

@@ -7,9 +7,6 @@ import { RADIO_PREFIXES, WindowSize } from './constants';
  */
 export function windowOpen(channel: Channel, scale: boolean): void {
   setWindowVisibility(true, scale);
-  Byond.winset('tgui_say.browser', {
-    focus: true,
-  });
   Byond.sendMessage('open', { channel });
 }
 

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 */
@@ -47,7 +48,7 @@
   background-color: black;
   display: grid;
   font: 'tgfont';
-  grid-template-columns: 3.5rem 1fr;
+  grid-template-columns: 4rem 1fr;
   inset: 2px;
   overflow: hidden;
   padding: 2px;
@@ -67,11 +68,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,
@@ -98,6 +98,7 @@
   margin: 0.1rem 0 0 0.4rem;
   outline: none;
   resize: none;
+  overflow: hidden;
   scrollbar-width: thin;
   scrollbar-color: color.scale(
       colors.$button,
@@ -105,3 +106,7 @@
     )
     transparent;
 }
+
+.textarea-large {
+  overflow-y: scroll;
+}