TGUI Bugfixes (#22826)

Fixes https://github.com/Aurorastation/Aurora.3/issues/22672
Fixes https://github.com/Aurorastation/Aurora.3/issues/22782

changes:
- bugfix: "Chat Client TGUI properly clears message field after sending
message."
- bugfix: "ATM TGUI better handles money input amounts not being
'finalized' internally before using withdrawal buttons."
  - bugfix: "Agent ID TGUI no longer spammy when updating fields."

html/changelogs/Bat-TGUIFixes.yml

@@ -0,0 +1,6 @@
+author: Batrachophrenoboocosmomachia
+delete-after: True
+changes:
+  - bugfix: "Chat Client TGUI properly clears message field after sending message."
+  - bugfix: "ATM TGUI better handles money input amounts not being 'finalized' internally before using withdrawal buttons."
+  - bugfix: "Agent ID TGUI no longer spammy when updating fields."

tgui/packages/tgui/interfaces/ATM.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import {
   Box,
   Button,
@@ -49,14 +50,14 @@ export const ATM = (props) => {
             data.emagged ? 'Idris SeSeSelfERR#1#@2' : 'Idris Banking Interface'
           }
           buttons={
-            data.authenticated_account && (
+            data.authenticated_account ? (
               <Button
                 content="Logout"
                 icon="times"
                 color="red"
                 onClick={() => act('logout')}
               />
-            )
+            ) : null
           }
         >
           {data.ticks_left_locked_down ? (
@@ -123,6 +124,8 @@ export const LoginWindow = (props) => {
 export const AuthenticatedWindow = (props) => {
   const { act, data } = useBackend<ATMData>();
   const [withdraw, setWithdraw] = useLocalState<number>('withdraw', 0);
+  const withdrawRef = useRef(withdraw);
+  const withdrawInputRef = useRef<NumberInput | null>(null);
   const [security, setSecurity] = useLocalState<boolean>('security', false);
   const [transfer, setTransfer] = useLocalState<boolean>('transfer', false);
   const [target, setTarget] = useLocalState<string>('target', '');
@@ -133,6 +136,27 @@ export const AuthenticatedWindow = (props) => {
   );
   const [logs, setLogs] = useLocalState<boolean>('logs', false);
 
+  const setWithdrawAmount = (value: number) => {
+    withdrawRef.current = value;
+    setWithdraw(value);
+  };
+
+  const commitWithdrawAmount = () => {
+    const activeInput = withdrawInputRef.current?.inputRef.current;
+
+    if (activeInput && document.activeElement === activeInput) {
+      const value = Number.parseFloat(activeInput.value);
+
+      if (!Number.isNaN(value)) {
+        const clampedValue = Math.min(Math.max(value, 1), data.money);
+        setWithdrawAmount(clampedValue);
+        return clampedValue;
+      }
+    }
+
+    return withdrawRef.current;
+  };
+
   return (
     <Section>
       <Box fontSize={1.2} bold>
@@ -146,6 +170,7 @@ export const AuthenticatedWindow = (props) => {
       <LabeledList>
         <LabeledList.Item label="Withdraw">
           <NumberInput
+            ref={withdrawInputRef}
             value={withdraw}
             minValue={1}
             width={3}
@@ -154,18 +179,24 @@ export const AuthenticatedWindow = (props) => {
             unit="电"
             step={1}
             stepPixelSize={5}
-            onChange={(value) => setWithdraw(value)}
+            onChange={(value) => setWithdrawAmount(value)}
           />
           &nbsp;
           <Button
             tooltip="Cash"
             icon="check"
-            onClick={() => act('withdrawal', { funds_amount: withdraw })}
+            onMouseDown={() => commitWithdrawAmount()}
+            onClick={() =>
+              act('withdrawal', { funds_amount: commitWithdrawAmount() })
+            }
           />
           <Button
             tooltip="Charge Card"
             icon="credit-card"
-            onClick={() => act('e_withdrawal', { funds_amount: withdraw })}
+            onMouseDown={() => commitWithdrawAmount()}
+            onClick={() =>
+              act('e_withdrawal', { funds_amount: commitWithdrawAmount() })
+            }
           />
         </LabeledList.Item>
       </LabeledList>

tgui/packages/tgui/interfaces/AgentID.tsx

@@ -47,7 +47,7 @@ export const AgentID = (props) => {
                 value={data.name}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) => act('setName', { name: value })}
+                onBlur={(value) => act('setName', { name: value })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="Age">
@@ -65,7 +65,7 @@ export const AgentID = (props) => {
                 value={data.sex}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) => act('setSex', { sex: value })}
+                onBlur={(value) => act('setSex', { sex: value })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="Photo">
@@ -83,7 +83,7 @@ export const AgentID = (props) => {
                 value={data.blood_type}
                 placeholder="Input the desired value, then press enter."
                 width="20%"
-                onChange={(value) => act('setBloodType', { bloodtype: value })}
+                onBlur={(value) => act('setBloodType', { bloodtype: value })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="DNA Hash">
@@ -91,7 +91,7 @@ export const AgentID = (props) => {
                 value={data.dna_hash}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) => act('setDNAHash', { dnahash: value })}
+                onBlur={(value) => act('setDNAHash', { dnahash: value })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="Fingerprint Hash">
@@ -99,7 +99,7 @@ export const AgentID = (props) => {
                 value={data.fingerprint_hash}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('setFingerprintHash', { fingerprinthash: value })
                 }
               />
@@ -113,7 +113,7 @@ export const AgentID = (props) => {
                 value={data.employer_faction}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) => act('setEmployer', { employer: value })}
+                onBlur={(value) => act('setEmployer', { employer: value })}
               />
             </LabeledList.Item>
             <LabeledList.Item label="Assignment">
@@ -121,7 +121,7 @@ export const AgentID = (props) => {
                 value={data.assignment}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('setAssignment', { assignment: value })
                 }
               />
@@ -131,7 +131,7 @@ export const AgentID = (props) => {
                 value={data.citizenship}
                 placeholder="Input the desired value, then press enter."
                 width="100%"
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('setCitizenship', { citizenship: value })
                 }
               />

tgui/packages/tgui/interfaces/ChatClient.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Box,
   Button,
@@ -174,8 +175,7 @@ export const AllUsers = (props) => {
 
 export const Chat = (props) => {
   const { act, data } = useBackend<ChatData>();
-  const [newMessage, setNewMessage] = useLocalState<string>(`newMessage`, ``);
-
+  const [messageInputKey, setMessageInputKey] = useState(0);
   const [creatingJoinPassword, setCreatingJoinPassword] = useLocalState(
     'creatingJoinPassword',
     0,
@@ -187,6 +187,8 @@ export const Chat = (props) => {
 
   const [title, setTitle] = useLocalState<string>(`title`, ``);
 
+  const activeRef = data.active ? data.active.ref : '';
+
   return (
     <Section
       title="Conversation"
@@ -284,15 +286,20 @@ export const Chat = (props) => {
       &nbsp;
       <Box>
         <Input
-          value={newMessage}
+          key={`${activeRef}-${messageInputKey}`}
           placeholder="Type your message. Press enter to send."
+          autoFocus
           width="100%"
           selfClear={true}
           onEnter={(v) => {
-            setNewMessage(v);
+            if (!v.length) {
+              return;
+            }
+
+            setMessageInputKey((key) => key + 1);
             act('send', {
               message: v,
-              target: data.active ? data.active.ref : '',
+              target: activeRef,
             });
           }}
         />