[MIRROR] Fixes input boxes [No gbp] [MDB IGNORE] (#25761) (#1235)

* Fixes input boxes [No gbp] (#80490) ## About The Pull Request One of the quirks of react is that we're no longer using onChange the same as Inferno - React's version is a synthetic event. I made the mistake of thinking it would be okay. Many interfaces are using onChange events to send messages to byond (very laggy), others are using it to close the input (closes each keypress). So this was the alternative- I hope to replicate the behavior via onBlur && onEnter. I went through to undo most of the onInput -> onChange replacements of #80340 where it made sense. Other inputs which should safely use onChange (DEFINITELY to send messages) remain as such. Example of an input which used onChange now working with this PR: ![aUojN0owHO](https://github.com/tgstation/tgstation/assets/42397676/82aa1d44-360d-4978-bef8-12720d7b4c70) ## Why It's Good For The Game Bug fixes Fixes #80486 ## Changelog :cl: fix: Name input in character setup should work properly now. fix: Many inputs should feel more responsive. /:cl: * Fixes input boxes [No gbp] --------- Co-authored-by: SkyratBot <[email protected]> Co-authored-by: Jeremiah <[email protected]>
Fluffy-Frontier · Dec 21, 2023 · 4b5dd96 · 4b5dd96
1 parent 44f2c84
commit 4b5dd96
Show file tree

Hide file tree

Showing 25 changed files with 34 additions and 29 deletions.
diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
@@ -552,9 +552,10 @@ A basic text input, which allow users to enter text into a UI.
 - `fluid: boolean` - Fill all available horizontal space.
 - `selfClear: boolean` - Clear after hitting enter, as well as remain focused
   when this happens. Useful for things like chat inputs.
-- `onChange: (e, value) => void` - Fires when the value is changed.
+- `onChange: (e, value) => void` - Fires when the user clicks out or presses enter.
 - `onEnter: (e, value) => void` - Fires when the user hits enter.
-- `onEscape: (e, value) => void` - Fires when the user hits escape.
+- `onEscape: (e) => void` - Fires when the user hits escape.
+- `onInput: (e, value) => void` - Fires when the user types into the input.
 
 ### `Knob`
 

diff --git a/tgui/packages/tgui/components/Input.tsx b/tgui/packages/tgui/components/Input.tsx
@@ -17,12 +17,14 @@ type Props = Partial<{
   fluid: boolean;
   maxLength: number;
   monospace: boolean;
-  // Fires when: Value changes
+  /** Fires when user is 'done typing': Clicked out, blur, enter key */
   onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  // Fires when: Pressed enter without shift
+  /** Fires once the enter key is pressed */
   onEnter: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  // Fires when: Pressed escape
+  /** Fires once the escape key is pressed */
   onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
+  /** Fires on each key press / value change. Used for searching */
+  onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
   placeholder: string;
   selfClear: boolean;
   value: string | number;
@@ -57,6 +59,7 @@ export const Input = (props: Props) => {
         event.currentTarget.value = '';
       } else {
         event.currentTarget.blur();
+        onChange?.(event, event.currentTarget.value);
       }
 
       return;
@@ -102,7 +105,8 @@ export const Input = (props: Props) => {
       <input
         className="Input__input"
         maxLength={maxLength}
-        onChange={(event) => onChange?.(event, event.target.value)}
+        onBlur={(event) => onChange?.(event, event.target.value)}
+        onChange={(event) => onInput?.(event, event.target.value)}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         ref={inputRef}

diff --git a/tgui/packages/tgui/interfaces/Cargo.jsx b/tgui/packages/tgui/interfaces/Cargo.jsx
@@ -235,7 +235,7 @@ export const CargoCatalog = (props) => {
                     fluid
                     placeholder="Search..."
                     value={searchText}
-                    onChange={(e, value) => {
+                    onInput={(e, value) => {
                       if (value === searchText) {
                         return;
                       }

diff --git a/tgui/packages/tgui/interfaces/CellularEmporium.tsx b/tgui/packages/tgui/interfaces/CellularEmporium.tsx
@@ -71,7 +71,7 @@ export const CellularEmporium = (props) => {
               <Stack.Item>
                 <Input
                   width="200px"
-                  onChange={(event, value) => setSearchAbilities(value)}
+                  onInput={(event, value) => setSearchAbilities(value)}
                   placeholder="Search Abilities..."
                   value={searchAbilities}
                 />

diff --git a/tgui/packages/tgui/interfaces/CheckboxInput.tsx b/tgui/packages/tgui/interfaces/CheckboxInput.tsx
@@ -99,7 +99,7 @@ export const CheckboxInput = (props) => {
               <Input
                 fluid
                 value={searchQuery}
-                onChange={(_, value) => setSearchQuery(value)}
+                onInput={(_, value) => setSearchQuery(value)}
               />
             </Stack.Item>
           </Stack>

diff --git a/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx b/tgui/packages/tgui/interfaces/Fabrication/SearchBar.tsx
@@ -45,7 +45,7 @@ export class SearchBar extends Component<SearchBarProps> {
           <Input
             fluid
             placeholder={hint ? hint : 'Search for...'}
-            onChange={(_e: unknown, v: string) => this.onInput(v)}
+            onInput={(_e: unknown, v: string) => this.onInput(v)}
             value={searchText}
           />
         </Stack.Item>

diff --git a/tgui/packages/tgui/interfaces/ForceEvent.tsx b/tgui/packages/tgui/interfaces/ForceEvent.tsx
@@ -94,7 +94,7 @@ export const PanelOptions = (props) => {
         <Input
           autoFocus
           fluid
-          onChange={(e, value) => setSearchQuery(value)}
+          onInput={(e, value) => setSearchQuery(value)}
           placeholder="Search..."
           value={searchQuery}
         />

diff --git a/tgui/packages/tgui/interfaces/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputModal.tsx
@@ -246,7 +246,7 @@ const SearchBar = (props) => {
         event.preventDefault();
         act('submit', { entry: filteredItems[selected] });
       }}
-      onChange={(_, value) => onSearch(value)}
+      onInput={(_, value) => onSearch(value)}
       placeholder="Search..."
       value={searchQuery}
     />

diff --git a/tgui/packages/tgui/interfaces/LogViewer.tsx b/tgui/packages/tgui/interfaces/LogViewer.tsx
@@ -181,7 +181,7 @@ const CategoryViewer = (props: CategoryViewerProps) => {
             fill
             placeholder="Search"
             value={search}
-            onChange={(_, value) => setSearch(value)}
+            onInput={(_, value) => setSearch(value)}
           />
           <Button
             icon={'code'}

diff --git a/tgui/packages/tgui/interfaces/LuaEditor/StateSelectModal.jsx b/tgui/packages/tgui/interfaces/LuaEditor/StateSelectModal.jsx
@@ -43,7 +43,7 @@ export const StateSelectModal = (props) => {
               fluid
               placeholder="New State"
               value={input}
-              onChange={(_, value) => {
+              onInput={(_, value) => {
                 setInput(value);
               }}
             />

diff --git a/tgui/packages/tgui/interfaces/MedicalRecords/RecordTabs.tsx b/tgui/packages/tgui/interfaces/MedicalRecords/RecordTabs.tsx
@@ -37,7 +37,7 @@ export const MedicalRecordTabs = (props) => {
       <Stack.Item>
         <Input
           fluid
-          onChange={(_, value) => setSearch(value)}
+          onInput={(_, value) => setSearch(value)}
           placeholder="Name/Job/DNA"
         />
       </Stack.Item>

diff --git a/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx b/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx
@@ -34,7 +34,7 @@ export const NtosEmojipedia = (props) => {
                 type="text"
                 placeholder="Search by name"
                 value={filter}
-                onChange={(_, value) => setFilter(value)}
+                onInput={(_, value) => setFilter(value)}
               />
               <Button
                 tooltip={'Click on an emoji to copy its tag!'}

diff --git a/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx b/tgui/packages/tgui/interfaces/NtosMessenger/ChatScreen.tsx
@@ -309,7 +309,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
                     id="input"
                     value={message}
                     maxLength={1024}
-                    onChange={this.handleMessageInput}
+                    onInput={this.handleMessageInput}
                     onEnter={this.handleSendMessage}
                   />
                 </Stack.Item>

diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
@@ -143,7 +143,7 @@ export const NtosNetDownloader = (props) => {
             placeholder="Search program name..."
             fluid
             value={searchItem}
-            onChange={(e, value) => {
+            onInput={(e, value) => {
               setSearchItem(value);
             }}
           />

diff --git a/tgui/packages/tgui/interfaces/Orbit/index.tsx b/tgui/packages/tgui/interfaces/Orbit/index.tsx
@@ -98,7 +98,7 @@ const ObservableSearch = (props) => {
             autoFocus
             fluid
             onEnter={(event, value) => orbitMostRelevant(value)}
-            onChange={(event, value) => setSearchQuery(value)}
+            onInput={(event, value) => setSearchQuery(value)}
             placeholder="Search..."
             value={searchQuery}
           />

diff --git a/tgui/packages/tgui/interfaces/OreContainer.tsx b/tgui/packages/tgui/interfaces/OreContainer.tsx
@@ -44,7 +44,7 @@ export const OreContainer = (props) => {
                 width="150px"
                 placeholder="Search Ore..."
                 value={searchItem}
-                onChange={(e, value) => {
+                onInput={(e, value) => {
                   setSearchItem(value);
                 }}
                 fluid

diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx b/tgui/packages/tgui/interfaces/OreRedemptionMachine.jsx
@@ -132,7 +132,7 @@ export const OreRedemptionMachine = (props) => {
               width="150px"
               placeholder="Search Material..."
               value={searchItem}
-              onChange={(e, value) => {
+              onInput={(e, value) => {
                 setSearchItem(value);
 
                 if (value.length > 0) {

diff --git a/tgui/packages/tgui/interfaces/PersonalCrafting.tsx b/tgui/packages/tgui/interfaces/PersonalCrafting.tsx
@@ -260,7 +260,7 @@ export const PersonalCrafting = (props) => {
                       (mode === MODE.cooking ? ' recipes...' : ' designs...')
                     }
                     value={searchText}
-                    onChange={(e, value) => {
+                    onInput={(e, value) => {
                       setPages(1);
                       setSearchText(value);
                     }}

diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.tsx b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
@@ -105,7 +105,7 @@ const ShoppingTab = (props) => {
                 width="150px"
                 placeholder="Search item..."
                 value={searchItem}
-                onChange={(e, value) => {
+                onInput={(e, value) => {
                   setSearchItem(value);
                 }}
               />

diff --git a/tgui/packages/tgui/interfaces/SecurityRecords/RecordTabs.tsx b/tgui/packages/tgui/interfaces/SecurityRecords/RecordTabs.tsx
@@ -39,7 +39,7 @@ export const SecurityRecordTabs = (props) => {
         <Input
           fluid
           placeholder="Name/Job/Fingerprints"
-          onChange={(event, value) => setSearch(value)}
+          onInput={(event, value) => setSearch(value)}
         />
       </Stack.Item>
       <Stack.Item grow>

diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.tsx b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
@@ -83,7 +83,7 @@ export const SeedExtractor = (props) => {
                   autoFocus
                   placeholder={'Search...'}
                   value={searchText}
-                  onChange={(e, value) => setSearchText(value)}
+                  onInput={(e, value) => setSearchText(value)}
                   fluid
                 />
               </Table.Cell>

diff --git a/tgui/packages/tgui/interfaces/SelectEquipment.jsx b/tgui/packages/tgui/interfaces/SelectEquipment.jsx
@@ -75,7 +75,7 @@ export const SelectEquipment = (props) => {
                   autoFocus
                   placeholder="Search"
                   value={searchText}
-                  onChange={(e, value) => setSearchText(value)}
+                  onInput={(e, value) => setSearchText(value)}
                 />
               </Stack.Item>
               <Stack.Item>

diff --git a/tgui/packages/tgui/interfaces/Spellbook.tsx b/tgui/packages/tgui/interfaces/Spellbook.tsx
@@ -762,7 +762,7 @@ export const Spellbook = (props) => {
                     width={15}
                     placeholder="Search for a spell..."
                     icon="search"
-                    onChange={(e, val) => setSpellSearch(val)}
+                    onInput={(e, val) => setSpellSearch(val)}
                   />
                 </Stack.Item>
               </Stack>

diff --git a/tgui/packages/tgui/interfaces/Techweb.jsx b/tgui/packages/tgui/interfaces/Techweb.jsx
@@ -301,7 +301,7 @@ const TechwebOverview = (props) => {
           <Flex.Item align={'center'}>
             <Input
               value={searchText}
-              onChange={(e, value) => setSearchText(value)}
+              onInput={(e, value) => setSearchText(value)}
               placeholder={'Search...'}
             />
           </Flex.Item>

diff --git a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
@@ -44,7 +44,7 @@ export const GenericUplink = (props: GenericUplinkProps) => {
           <Input
             autoFocus
             value={searchText}
-            onChange={(e, value) => setSearchText(value)}
+            onInput={(e, value) => setSearchText(value)}
             mx={1}
           />
           <Button