From 0b44352b13e58d785225bf655a1e90e739f4f432 Mon Sep 17 00:00:00 2001
From: NovaBot <154629622+NovaBot13@users.noreply.github.com>
Date: Thu, 28 Dec 2023 09:28:31 -0500
Subject: [PATCH] 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 <42397676+jlsnow301@users.noreply.github.com>
Co-authored-by: NovaBot <novasector@gmail.com>
---
 tgui/packages/tgui/components/Input.tsx | 29 +++++++++++++++++--------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/tgui/packages/tgui/components/Input.tsx b/tgui/packages/tgui/components/Input.tsx
index c515627b8c1..d9b517f1cb5 100644
--- 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([