Fixes input value not clearing on NTOS app [no gbp] (#143)

* Fixes input value not clearing on NTOS app [no gbp] (#80614) ## About The Pull Request Problem goes a little deeper than simply adding "selfClear" prop - ntos messenger is looking for more of a controlled component. Whenever messages are sent, it attempts to update the value in the input box ## Why It's Good For The Game Fixes #80611 ## Changelog :cl: fix: NTOS Messenger should clear on enter now /:cl: * Fixes input value not clearing on NTOS app [no gbp] --------- Co-authored-by: Jeremiah <[email protected]> Co-authored-by: NovaBot <[email protected]>
Fluffy-Frontier · Dec 28, 2023 · 0b44352 · 0b44352
1 parent 96d07f0
commit 0b44352
Showing 1 changed file with 20 additions and 9 deletions.
diff --git a/tgui/packages/tgui/components/Input.tsx b/tgui/packages/tgui/components/Input.tsx
@@ -77,22 +77,33 @@ export const Input = (props: Props) => {
     }
   };
 
+  /** Focuses the input on mount */
   useEffect(() => {
+    if (!autoFocus && !autoSelect) return;
+
     const input = inputRef.current;
     if (!input) return;
 
-    input.value = toInputValue(value);
-    if (autoFocus || autoSelect) {
-      setTimeout(() => {
-        input.focus();
+    setTimeout(() => {
+      input.focus();
 
-        if (autoSelect) {
-          input.select();
-        }
-      }, 1);
-    }
+      if (autoSelect) {
+        input.select();
+      }
+    }, 1);
   }, []);
 
+  /** Updates the initial value on props change */
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const newValue = toInputValue(value);
+    if (input.value === newValue) return;
+
+    input.value = newValue;
+  }, [value]);
+
   return (
     <Box
       className={classes([