From 9d47c4b417295a640bbc0284e34342cbf4bf85be Mon Sep 17 00:00:00 2001
From: Jeremiah <42397676+jlsnow301@users.noreply.github.com>
Date: Mon, 26 May 2025 06:38:38 -0700
Subject: [PATCH] [no gbp] more input changes (#91271)

## About The Pull Request
turns out simply debouncing input wasn't the correct answer to solving
many of the inputs in the game. on that account, i apologize for my
mistake. now that we have the `onBlur` prop (which was the old and
erroneously named `onChange`), most interfaces that were once marked
`expensive` are now only triggered on clicking out, escape, or enter.

here are interfaces which i deemed still worthy of the `expensive` prop,
and yes this is okay to debate me on:
- smartvend
- stackcrafting
- vending
- cargo catalog
- design browser (fabricators)
- records (security/medical consoles)
- orbit
- techweb

Generally these UIs just deal with big lists or do some sort of data
manipulation for filtering
([example](https://github.com/tgstation/tgstation/blob/master/tgui/packages/tgui/interfaces/Cargo/helpers.ts)),
thus I thought were valid to slow down while you finish typing (but not
totally freeze)
## Why It's Good For The Game
this should fix a number of issues, some unreported still.
## Changelog
:cl:
fix: Tgui inputs have been tweaked again to fix issues and seem more
responsive.
/:cl:
---
 tgui/packages/tgui-panel/chat/ChatPageSettings.tsx   |  3 +--
 .../packages/tgui-panel/settings/SettingsGeneral.tsx |  3 +--
 tgui/packages/tgui-panel/settings/TextHighlight.tsx  |  6 ++----
 tgui/packages/tgui/interfaces/AiVoiceChanger.tsx     |  6 ++----
 tgui/packages/tgui/interfaces/AirlockElectronics.tsx |  6 ++----
 .../tgui/interfaces/AutomatedAnnouncement.tsx        | 10 ++--------
 tgui/packages/tgui/interfaces/BountyBoard.tsx        |  3 +--
 tgui/packages/tgui/interfaces/CameraConsole.tsx      |  1 -
 tgui/packages/tgui/interfaces/Cargo/CargoCatalog.tsx |  1 +
 tgui/packages/tgui/interfaces/ChemPress.tsx          |  3 +--
 tgui/packages/tgui/interfaces/CommandReport.tsx      |  2 +-
 .../tgui/interfaces/ControllerOverview/index.tsx     |  1 -
 tgui/packages/tgui/interfaces/CrewConsole.tsx        |  1 -
 tgui/packages/tgui/interfaces/CyborgBootDebug.jsx    |  3 +--
 .../tgui/interfaces/Fabrication/DesignBrowser.tsx    |  1 +
 tgui/packages/tgui/interfaces/Filteriffic.jsx        |  6 ++----
 tgui/packages/tgui/interfaces/FishAnalyzer.tsx       |  1 -
 tgui/packages/tgui/interfaces/ForceEvent.tsx         |  1 -
 .../packages/tgui/interfaces/GreyscaleModifyMenu.tsx |  9 +++------
 .../tgui/interfaces/HighLuminosityEyesMenu.tsx       |  9 +++------
 tgui/packages/tgui/interfaces/HoloPay.tsx            |  3 +--
 tgui/packages/tgui/interfaces/HypnoChair.jsx         |  3 +--
 .../interfaces/IntegratedCircuit/ComponentMenu.jsx   |  1 -
 .../tgui/interfaces/IntegratedCircuit/index.jsx      |  3 +--
 tgui/packages/tgui/interfaces/LTSRBT.tsx             |  6 ++----
 tgui/packages/tgui/interfaces/LaunchpadConsole.tsx   |  3 +--
 .../packages/tgui/interfaces/LibraryAdmin/Search.tsx | 12 ++++--------
 .../LibraryConsole/components/PageSelect.tsx         |  3 +--
 .../interfaces/LibraryConsole/components/Search.tsx  |  9 +++------
 .../interfaces/LibraryConsole/screens/Upload.tsx     |  6 ++----
 tgui/packages/tgui/interfaces/LibraryVisitor.jsx     |  9 +++------
 .../interfaces/ListInputWindow/ListInputModal.tsx    |  1 -
 tgui/packages/tgui/interfaces/LogViewer.tsx          |  7 +------
 tgui/packages/tgui/interfaces/LootPanel/index.tsx    |  1 -
 tgui/packages/tgui/interfaces/MechpadConsole.jsx     |  3 +--
 tgui/packages/tgui/interfaces/Newscaster.jsx         |  9 +++------
 tgui/packages/tgui/interfaces/NtosCard.tsx           |  6 ++----
 tgui/packages/tgui/interfaces/NtosEmojipedia.tsx     |  1 -
 tgui/packages/tgui/interfaces/NtosNetDownloader.tsx  |  1 -
 .../packages/tgui/interfaces/NtosPortraitPrinter.jsx |  3 +--
 tgui/packages/tgui/interfaces/NtosScipaper.jsx       |  9 +++------
 tgui/packages/tgui/interfaces/OreContainer.tsx       |  1 -
 .../tgui/interfaces/OreRedemptionMachine.tsx         |  1 +
 tgui/packages/tgui/interfaces/Pandemic/Virus.tsx     |  3 +--
 .../tgui/interfaces/ParticleEdit/EntriesBasic.tsx    |  9 +++------
 .../interfaces/ParticleEdit/EntriesGenerators.tsx    |  3 +--
 .../packages/tgui/interfaces/PlayerTicketHistory.tsx |  3 +--
 tgui/packages/tgui/interfaces/PortraitPicker.jsx     |  3 +--
 .../CharacterPreferences/MainPage.tsx                |  1 -
 .../CharacterPreferences/QuirksPage.tsx              |  1 -
 tgui/packages/tgui/interfaces/RequestManager.tsx     |  1 -
 tgui/packages/tgui/interfaces/SeedExtractor.tsx      |  1 -
 tgui/packages/tgui/interfaces/SelectEquipment.jsx    |  1 -
 .../packages/tgui/interfaces/SentienceFunBalloon.jsx |  3 +--
 tgui/packages/tgui/interfaces/Spellbook.tsx          |  1 -
 tgui/packages/tgui/interfaces/StackCrafting.tsx      |  1 +
 tgui/packages/tgui/interfaces/Telecomms.jsx          |  6 ++----
 .../tgui/interfaces/Uplink/GenericUplink.tsx         |  1 -
 .../tgui/interfaces/common/AtmosHandbook.tsx         |  3 +--
 tgui/packages/tgui/interfaces/common/SearchBar.tsx   |  5 ++++-
 60 files changed, 71 insertions(+), 152 deletions(-)

diff --git a/tgui/packages/tgui-panel/chat/ChatPageSettings.tsx b/tgui/packages/tgui-panel/chat/ChatPageSettings.tsx
index 5725c10ad78..463ec0c2dd5 100644
--- a/tgui/packages/tgui-panel/chat/ChatPageSettings.tsx
+++ b/tgui/packages/tgui-panel/chat/ChatPageSettings.tsx
@@ -50,9 +50,8 @@ export function ChatPageSettings(props) {
         <Stack.Item grow ml={0.5}>
           <Input
             fluid
-            expensive
             value={page.name}
-            onChange={(value) =>
+            onBlur={(value) =>
               dispatch(
                 updateChatPage({
                   pageId: page.id,
diff --git a/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx b/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx
index 25bd8881806..4f09da97a06 100644
--- a/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx
+++ b/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx
@@ -114,8 +114,7 @@ export function SettingsGeneral(props) {
                 <Input
                   fluid
                   value={fontFamily}
-                  expensive
-                  onChange={(value) =>
+                  onBlur={(value) =>
                     dispatch(
                       updateSettings({
                         fontFamily: value,
diff --git a/tgui/packages/tgui-panel/settings/TextHighlight.tsx b/tgui/packages/tgui-panel/settings/TextHighlight.tsx
index ab146886523..29d28b3647b 100644
--- a/tgui/packages/tgui-panel/settings/TextHighlight.tsx
+++ b/tgui/packages/tgui-panel/settings/TextHighlight.tsx
@@ -153,12 +153,11 @@ function TextHighlightSetting(props) {
         <Stack.Item>
           <ColorBox mr={1} color={highlightColor} />
           <Input
-            expensive
             width="5em"
             monospace
             placeholder="#ffffff"
             value={highlightColor}
-            onChange={(value) =>
+            onBlur={(value) =>
               dispatch(
                 updateHighlightSetting({
                   id: id,
@@ -170,12 +169,11 @@ function TextHighlightSetting(props) {
         </Stack.Item>
       </Stack>
       <TextArea
-        expensive
         fluid
         height="3em"
         value={highlightText}
         placeholder="Put words to highlight here. Separate terms with commas, i.e. (term1, term2, term3)"
-        onChange={(value) =>
+        onBlur={(value) =>
           dispatch(
             updateHighlightSetting({
               id: id,
diff --git a/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx b/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
index 1b57446037a..143ac97b81f 100644
--- a/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
+++ b/tgui/packages/tgui/interfaces/AiVoiceChanger.tsx
@@ -49,9 +49,8 @@ export function AiVoiceChanger(props) {
           </LabeledList.Item>
           <LabeledList.Item label="Verb">
             <Input
-              expensive
               value={say_verb}
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('verb', {
                   verb: value,
                 })
@@ -69,9 +68,8 @@ export function AiVoiceChanger(props) {
           </LabeledList.Item>
           <LabeledList.Item label="Fake name">
             <Input
-              expensive
               value={name}
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('name', {
                   name: value,
                 })
diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.tsx b/tgui/packages/tgui/interfaces/AirlockElectronics.tsx
index 7983b8c0538..effc6864367 100644
--- a/tgui/packages/tgui/interfaces/AirlockElectronics.tsx
+++ b/tgui/packages/tgui/interfaces/AirlockElectronics.tsx
@@ -118,8 +118,7 @@ export function AirLockMainSection(props) {
                 fluid
                 maxLength={30}
                 value={passedName}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('passedName', {
                     passedName: value,
                   })
@@ -131,8 +130,7 @@ export function AirLockMainSection(props) {
                 fluid
                 maxLength={30}
                 value={passedCycleId}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('passedCycleId', {
                     passedCycleId: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.tsx b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.tsx
index ed0142a4813..305b459e020 100644
--- a/tgui/packages/tgui/interfaces/AutomatedAnnouncement.tsx
+++ b/tgui/packages/tgui/interfaces/AutomatedAnnouncement.tsx
@@ -69,12 +69,7 @@ export const AutomatedAnnouncement = (props) => {
           <Stack.Item>
             <LabeledList>
               <LabeledList.Item label="Search">
-                <Input
-                  fluid
-                  placeholder="Name/Line/Var"
-                  onChange={setSearch}
-                  expensive
-                />
+                <Input fluid placeholder="Name/Line/Var" onChange={setSearch} />
               </LabeledList.Item>
             </LabeledList>
           </Stack.Item>
@@ -132,10 +127,9 @@ export const AutomatedAnnouncement = (props) => {
                             <Table.Cell>
                               <Input
                                 fluid
-                                expensive
                                 value={announcementLine}
                                 disabled={!entry.modifiable}
-                                onChange={(value) =>
+                                onBlur={(value) =>
                                   act('Text', {
                                     entryRef: entry.entryRef,
                                     lineKey,
diff --git a/tgui/packages/tgui/interfaces/BountyBoard.tsx b/tgui/packages/tgui/interfaces/BountyBoard.tsx
index 004219e4458..6492b24192e 100644
--- a/tgui/packages/tgui/interfaces/BountyBoard.tsx
+++ b/tgui/packages/tgui/interfaces/BountyBoard.tsx
@@ -161,10 +161,9 @@ export const BountyBoardContent = (props) => {
           <Collapsible title="New Bounty" width="220px" color="green">
             <Section>
               <TextArea
-                expensive
                 height="150px"
                 width="200px"
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('bountyText', {
                     bountytext: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/CameraConsole.tsx b/tgui/packages/tgui/interfaces/CameraConsole.tsx
index 4fd754153cb..2325d3e9702 100644
--- a/tgui/packages/tgui/interfaces/CameraConsole.tsx
+++ b/tgui/packages/tgui/interfaces/CameraConsole.tsx
@@ -116,7 +116,6 @@ const CameraSelector = (props) => {
       <Stack.Item>
         <Input
           autoFocus
-          expensive
           fluid
           mt={1}
           placeholder="Search for a camera"
diff --git a/tgui/packages/tgui/interfaces/Cargo/CargoCatalog.tsx b/tgui/packages/tgui/interfaces/Cargo/CargoCatalog.tsx
index 521d68380ce..df348cd26f0 100644
--- a/tgui/packages/tgui/interfaces/Cargo/CargoCatalog.tsx
+++ b/tgui/packages/tgui/interfaces/Cargo/CargoCatalog.tsx
@@ -111,6 +111,7 @@ function CatalogTabs(props: CatalogTabsProps & Props) {
     <Stack fill vertical>
       <Stack.Item>
         <SearchBar
+          expensive
           query={searchText}
           onSearch={(value) => {
             if (value === searchText) {
diff --git a/tgui/packages/tgui/interfaces/ChemPress.tsx b/tgui/packages/tgui/interfaces/ChemPress.tsx
index b6b130db365..2a13ad1e3e5 100644
--- a/tgui/packages/tgui/interfaces/ChemPress.tsx
+++ b/tgui/packages/tgui/interfaces/ChemPress.tsx
@@ -102,9 +102,8 @@ export const ChemPress = (props) => {
             )}
             <LabeledList.Item label="Name">
               <Input
-                expensive
                 value={product_name}
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('change_product_name', {
                     name: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/CommandReport.tsx b/tgui/packages/tgui/interfaces/CommandReport.tsx
index 38a53bd17f6..e3ad8ca65ba 100644
--- a/tgui/packages/tgui/interfaces/CommandReport.tsx
+++ b/tgui/packages/tgui/interfaces/CommandReport.tsx
@@ -158,7 +158,7 @@ function ReportText(props) {
           <TextArea
             height="100%"
             fluid
-            onChange={setCommandReport}
+            onBlur={setCommandReport}
             value={commandReport}
             placeholder="Enter report text here..."
           />
diff --git a/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx b/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx
index 6a7dd43ce59..6de3120570c 100644
--- a/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx
+++ b/tgui/packages/tgui/interfaces/ControllerOverview/index.tsx
@@ -69,7 +69,6 @@ export function ControllerContent(props) {
                     onChange={(value) =>
                       dispatch({ type: FilterAction.Query, payload: value })
                     }
-                    expensive
                     placeholder="By name"
                     value={state.query}
                     width="85%"
diff --git a/tgui/packages/tgui/interfaces/CrewConsole.tsx b/tgui/packages/tgui/interfaces/CrewConsole.tsx
index 30bb944a209..c877714cae4 100644
--- a/tgui/packages/tgui/interfaces/CrewConsole.tsx
+++ b/tgui/packages/tgui/interfaces/CrewConsole.tsx
@@ -187,7 +187,6 @@ const CrewTable = () => {
           <Input
             placeholder="Search for name..."
             onChange={setSearchQuery}
-            expensive
             value={searchQuery}
           />
         </>
diff --git a/tgui/packages/tgui/interfaces/CyborgBootDebug.jsx b/tgui/packages/tgui/interfaces/CyborgBootDebug.jsx
index b66cad1e83b..3ef81d99030 100644
--- a/tgui/packages/tgui/interfaces/CyborgBootDebug.jsx
+++ b/tgui/packages/tgui/interfaces/CyborgBootDebug.jsx
@@ -52,10 +52,9 @@ export const CyborgBootDebug = (props) => {
               }
             >
               <Input
-                expensive
                 fluid
                 value={designation || 'Default Cyborg'}
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('rename', {
                     new_name: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
index 959f22ef7e4..58dfdf9c9d5 100644
--- a/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
+++ b/tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx
@@ -269,6 +269,7 @@ export const DesignBrowser = <T extends Design = Design>(
             <Stack.Item>
               <Section>
                 <SearchBar
+                  expensive
                   query={searchText}
                   onSearch={setSearchText}
                   placeholder={'Search all designs...'}
diff --git a/tgui/packages/tgui/interfaces/Filteriffic.jsx b/tgui/packages/tgui/interfaces/Filteriffic.jsx
index ac78bfc56d3..441e62e240d 100644
--- a/tgui/packages/tgui/interfaces/Filteriffic.jsx
+++ b/tgui/packages/tgui/interfaces/Filteriffic.jsx
@@ -85,10 +85,9 @@ const FilterTextEntry = (props) => {
 
   return (
     <Input
-      expensive
       value={value}
       width="250px"
-      onChange={(value) =>
+      onBlur={(value) =>
         act('modify_filter_value', {
           name: filterName,
           new_data: {
@@ -115,10 +114,9 @@ const FilterColorEntry = (props) => {
       />
       <ColorBox color={value} mr={0.5} />
       <Input
-        expensive
         value={value}
         width="90px"
-        onChange={(value) =>
+        onBlur={(value) =>
           act('transition_filter_value', {
             name: filterName,
             new_data: {
diff --git a/tgui/packages/tgui/interfaces/FishAnalyzer.tsx b/tgui/packages/tgui/interfaces/FishAnalyzer.tsx
index 2a41c214eb6..5894226a5dc 100644
--- a/tgui/packages/tgui/interfaces/FishAnalyzer.tsx
+++ b/tgui/packages/tgui/interfaces/FishAnalyzer.tsx
@@ -89,7 +89,6 @@ export const FishAnalyzer = (props) => {
                   value={searchText}
                   onChange={setSearchText}
                   fluid
-                  expensive
                 />
               </Section>
             </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ForceEvent.tsx b/tgui/packages/tgui/interfaces/ForceEvent.tsx
index 1212a705549..0ea9855f4a4 100644
--- a/tgui/packages/tgui/interfaces/ForceEvent.tsx
+++ b/tgui/packages/tgui/interfaces/ForceEvent.tsx
@@ -120,7 +120,6 @@ function PanelOptions(props) {
           onChange={setSearchQuery}
           placeholder="Search..."
           value={searchQuery}
-          expensive
         />
       </Stack.Item>
       <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
index 8802e4da362..b6ec28071ca 100644
--- a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
+++ b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
@@ -77,8 +77,7 @@ const ConfigDisplay = (props) => {
           <Button icon="cogs" onClick={() => act('select_config')} />
           <Input
             value={data.greyscale_config}
-            expensive
-            onChange={(value) =>
+            onBlur={(value) =>
               act('load_config_from_string', { config_string: value })
             }
           />
@@ -102,8 +101,7 @@ const ColorDisplay = (props) => {
           />
           <Input
             value={colors.map((item) => item.value).join('')}
-            expensive
-            onChange={(value) =>
+            onBlur={(value) =>
               act('recolor_from_string', { color_string: value })
             }
           />
@@ -128,8 +126,7 @@ const ColorDisplay = (props) => {
             <Input
               value={item.value}
               width={7}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('recolor', { color_index: item.index, new_color: value })
               }
             />
diff --git a/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx b/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
index 67f25b935bc..ff002f84764 100644
--- a/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
+++ b/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
@@ -50,8 +50,7 @@ const LightColorDisplay = (props) => {
         value={lightColor}
         width={6}
         maxLength={7}
-        expensive
-        onChange={(value) =>
+        onBlur={(value) =>
           act('enter_color', {
             new_color: value,
             to_update: ToUpdate.LightColor,
@@ -127,8 +126,7 @@ const EyeColorDisplay = (props) => {
               value={eyeColor.left}
               width={6}
               maxLength={7}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('enter_color', {
                   new_color: value,
                   to_update: ToUpdate.LeftEye,
@@ -156,8 +154,7 @@ const EyeColorDisplay = (props) => {
               value={eyeColor.right}
               width={6}
               maxLength={7}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('enter_color', {
                   new_color: value,
                   to_update: ToUpdate.RightEye,
diff --git a/tgui/packages/tgui/interfaces/HoloPay.tsx b/tgui/packages/tgui/interfaces/HoloPay.tsx
index c94265a98c5..696e4c6720d 100644
--- a/tgui/packages/tgui/interfaces/HoloPay.tsx
+++ b/tgui/packages/tgui/interfaces/HoloPay.tsx
@@ -213,8 +213,7 @@ const SetupDisplay = (props) => {
             fluid
             height="3rem"
             maxLength={42}
-            expensive
-            onChange={(value) => {
+            onBlur={(value) => {
               value?.length > 3 && act('rename', { name: value });
             }}
             placeholder={decodeHtmlEntities(name)}
diff --git a/tgui/packages/tgui/interfaces/HypnoChair.jsx b/tgui/packages/tgui/interfaces/HypnoChair.jsx
index c464d1ade1b..bc35fc67439 100644
--- a/tgui/packages/tgui/interfaces/HypnoChair.jsx
+++ b/tgui/packages/tgui/interfaces/HypnoChair.jsx
@@ -57,9 +57,8 @@ export const HypnoChair = (props) => {
             </LabeledList.Item>
             <LabeledList.Item label="Trigger Phrase">
               <Input
-                expensive
                 value={data.trigger}
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_phrase', {
                     phrase: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
index a50998a8a0e..7f9b1fa32e0 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/ComponentMenu.jsx
@@ -131,7 +131,6 @@ export class ComponentMenu extends Component {
               placeholder="Search.."
               value={currentSearch}
               fluid
-              expensive
               onChange={(val) =>
                 this.setState({
                   currentSearch: val,
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
index 711c17b37bd..9b853c51946 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
@@ -462,8 +462,7 @@ export class IntegratedCircuit extends Component {
               <Input
                 placeholder="Name"
                 value={display_name}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_display_name', { display_name: value })
                 }
               />
diff --git a/tgui/packages/tgui/interfaces/LTSRBT.tsx b/tgui/packages/tgui/interfaces/LTSRBT.tsx
index e45ee434c2d..7471a519099 100644
--- a/tgui/packages/tgui/interfaces/LTSRBT.tsx
+++ b/tgui/packages/tgui/interfaces/LTSRBT.tsx
@@ -33,8 +33,7 @@ export const LTSRBT = (props) => {
               width="80%"
               value={name}
               placeholder="Insert a name"
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('change_name', {
                   value: value,
                 })
@@ -74,8 +73,7 @@ export const LTSRBT = (props) => {
               fluid
               value={desc}
               placeholder="Insert a description (or don't)"
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('change_desc', {
                   value: value,
                 })
diff --git a/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx b/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
index 491d850383c..30f9a0008b5 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
+++ b/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
@@ -135,10 +135,9 @@ function LaunchpadTitle(props) {
       <Stack fill>
         <Stack.Item grow>
           <Input
-            expensive
             value={pad_name}
             width="170px"
-            onChange={(value) =>
+            onBlur={(value) =>
               act('rename', {
                 name: value,
               })
diff --git a/tgui/packages/tgui/interfaces/LibraryAdmin/Search.tsx b/tgui/packages/tgui/interfaces/LibraryAdmin/Search.tsx
index 48be90f885b..babc8b2d4b0 100644
--- a/tgui/packages/tgui/interfaces/LibraryAdmin/Search.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryAdmin/Search.tsx
@@ -60,8 +60,7 @@ export function SearchAndDisplay(props) {
                 value={book_id?.toString()}
                 placeholder={book_id === null ? 'ID' : String(book_id)}
                 width="70px"
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_id', {
                     id: value,
                   })
@@ -84,8 +83,7 @@ export function SearchAndDisplay(props) {
                 value={title}
                 placeholder={title || 'Title'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_title', {
                     title: value,
                   })
@@ -97,8 +95,7 @@ export function SearchAndDisplay(props) {
                 value={author}
                 placeholder={author || 'Author'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_author', {
                     author: value,
                   })
@@ -110,8 +107,7 @@ export function SearchAndDisplay(props) {
                 value={author_ckey}
                 placeholder={author_ckey || 'Ckey'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_ckey', {
                     ckey: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/LibraryConsole/components/PageSelect.tsx b/tgui/packages/tgui/interfaces/LibraryConsole/components/PageSelect.tsx
index 08302fe86a3..7f4f1a8eb2f 100644
--- a/tgui/packages/tgui/interfaces/LibraryConsole/components/PageSelect.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryConsole/components/PageSelect.tsx
@@ -32,8 +32,7 @@ export function PageSelect(props) {
       <Stack.Item>
         <Input
           placeholder={current_page + '/' + page_count}
-          expensive
-          onChange={(value) => {
+          onBlur={(value) => {
             if (value !== '') {
               call_on_change(value);
               setPage(value);
diff --git a/tgui/packages/tgui/interfaces/LibraryConsole/components/Search.tsx b/tgui/packages/tgui/interfaces/LibraryConsole/components/Search.tsx
index 240cb2f7a5f..da8a9140bd6 100644
--- a/tgui/packages/tgui/interfaces/LibraryConsole/components/Search.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryConsole/components/Search.tsx
@@ -46,8 +46,7 @@ function SearchTabs(props) {
                 placeholder={book_id === null ? 'ID' : book_id}
                 mt={0.5}
                 width="70px"
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_id', {
                     id: value,
                   })
@@ -71,8 +70,7 @@ function SearchTabs(props) {
                 value={title}
                 placeholder={title || 'Title'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_title', {
                     title: value,
                   })
@@ -84,8 +82,7 @@ function SearchTabs(props) {
                 value={author}
                 placeholder={author || 'Author'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_author', {
                     author: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/LibraryConsole/screens/Upload.tsx b/tgui/packages/tgui/interfaces/LibraryConsole/screens/Upload.tsx
index 5f51e035d7b..86b1e59bf3f 100644
--- a/tgui/packages/tgui/interfaces/LibraryConsole/screens/Upload.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryConsole/screens/Upload.tsx
@@ -72,8 +72,7 @@ export function Upload(props) {
                     placeholder={cache_title || 'Title'}
                     mt={0.5}
                     width={22}
-                    expensive
-                    onChange={(value) =>
+                    onBlur={(value) =>
                       act('set_cache_title', {
                         title: value,
                       })
@@ -91,8 +90,7 @@ export function Upload(props) {
                     value={cache_author}
                     placeholder={cache_author || 'Author'}
                     mt={0.5}
-                    expensive
-                    onChange={(value) =>
+                    onBlur={(value) =>
                       act('set_cache_author', {
                         author: value,
                       })
diff --git a/tgui/packages/tgui/interfaces/LibraryVisitor.jsx b/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
index 342f8ba9e95..da94e2cc62f 100644
--- a/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
+++ b/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
@@ -85,12 +85,11 @@ const SearchAndDisplay = (props) => {
           <Stack>
             <Stack.Item>
               <Input
-                expensive
                 value={book_id}
                 placeholder={book_id === null ? 'ID' : book_id}
                 mt={0.5}
                 width="70px"
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_id', {
                     id: value,
                   })
@@ -113,8 +112,7 @@ const SearchAndDisplay = (props) => {
                 value={title}
                 placeholder={title || 'Title'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_title', {
                     title: value,
                   })
@@ -126,8 +124,7 @@ const SearchAndDisplay = (props) => {
                 value={author}
                 placeholder={author || 'Author'}
                 mt={0.5}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('set_search_author', {
                     author: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
index c8b079a6cf0..fb18ae8ad37 100644
--- a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
@@ -153,7 +153,6 @@ export const ListInputModal = (props: ListInputModalProps) => {
             autoFocus
             autoSelect
             fluid
-            expensive
             onEnter={() => {
               act('submit', { entry: filteredItems[selected] });
             }}
diff --git a/tgui/packages/tgui/interfaces/LogViewer.tsx b/tgui/packages/tgui/interfaces/LogViewer.tsx
index a778880753a..2d8f807de77 100644
--- a/tgui/packages/tgui/interfaces/LogViewer.tsx
+++ b/tgui/packages/tgui/interfaces/LogViewer.tsx
@@ -172,12 +172,7 @@ const CategoryViewer = (props: CategoryViewerProps) => {
       }`}
       buttons={
         <>
-          <Input
-            placeholder="Search"
-            value={search}
-            onChange={setSearch}
-            expensive
-          />
+          <Input placeholder="Search" value={search} onChange={setSearch} />
           <Button
             icon="code"
             tooltip="RegEx Search"
diff --git a/tgui/packages/tgui/interfaces/LootPanel/index.tsx b/tgui/packages/tgui/interfaces/LootPanel/index.tsx
index f1c9f68f969..12bca417c7e 100644
--- a/tgui/packages/tgui/interfaces/LootPanel/index.tsx
+++ b/tgui/packages/tgui/interfaces/LootPanel/index.tsx
@@ -63,7 +63,6 @@ export function LootPanel(props) {
             onChange={setSearchText}
             placeholder="Search items..."
             value={searchText}
-            expensive
           />
           <Button
             m={0}
diff --git a/tgui/packages/tgui/interfaces/MechpadConsole.jsx b/tgui/packages/tgui/interfaces/MechpadConsole.jsx
index 82f59f1ca95..8a13ba8551b 100644
--- a/tgui/packages/tgui/interfaces/MechpadConsole.jsx
+++ b/tgui/packages/tgui/interfaces/MechpadConsole.jsx
@@ -21,8 +21,7 @@ export const MechpadControl = (props) => {
         <Input
           value={pad_name}
           width="200px"
-          expensive
-          onChange={(value) =>
+          onBlur={(value) =>
             act('rename', {
               name: value,
             })
diff --git a/tgui/packages/tgui/interfaces/Newscaster.jsx b/tgui/packages/tgui/interfaces/Newscaster.jsx
index 7685e493ec3..75aa086e63a 100644
--- a/tgui/packages/tgui/interfaces/Newscaster.jsx
+++ b/tgui/packages/tgui/interfaces/Newscaster.jsx
@@ -110,8 +110,7 @@ const NewscasterChannelCreation = (props) => {
               backgroundColor="black"
               textColor="white"
               maxLength={42}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('setChannelName', {
                   channeltext: value,
                 })
@@ -128,8 +127,7 @@ const NewscasterChannelCreation = (props) => {
               backgroundColor="black"
               textColor="white"
               maxLength={512}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('setChannelDesc', {
                   channeldesc: value,
                 })
@@ -221,8 +219,7 @@ const NewscasterCommentCreation = (props) => {
             backgroundColor="black"
             textColor="white"
             maxLength={512}
-            expensive
-            onChange={(value) =>
+            onBlur={(value) =>
               act('setCommentBody', {
                 commenttext: value,
               })
diff --git a/tgui/packages/tgui/interfaces/NtosCard.tsx b/tgui/packages/tgui/interfaces/NtosCard.tsx
index bbaad56901b..47fda65e3f5 100644
--- a/tgui/packages/tgui/interfaces/NtosCard.tsx
+++ b/tgui/packages/tgui/interfaces/NtosCard.tsx
@@ -187,8 +187,7 @@ const IdCardPage = (props) => {
               <Input
                 width="100%"
                 value={id_owner}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('PRG_edit', {
                     name: value,
                   })
@@ -217,8 +216,7 @@ const IdCardPage = (props) => {
                 fluid
                 mt={1}
                 value={id_rank}
-                expensive
-                onChange={(value) =>
+                onBlur={(value) =>
                   act('PRG_assign', {
                     assignment: value,
                   })
diff --git a/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx b/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx
index 4fc25e34f91..74e8351920c 100644
--- a/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx
+++ b/tgui/packages/tgui/interfaces/NtosEmojipedia.tsx
@@ -31,7 +31,6 @@ export const NtosEmojipedia = (props) => {
           buttons={
             <>
               <Input
-                expensive
                 placeholder="Search by name"
                 value={filter}
                 onChange={setFilter}
diff --git a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
index ca5c748d4dc..24c044c0c1d 100644
--- a/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
+++ b/tgui/packages/tgui/interfaces/NtosNetDownloader.tsx
@@ -144,7 +144,6 @@ export const NtosNetDownloader = (props) => {
             fluid
             value={searchItem}
             onChange={setSearchItem}
-            expensive
           />
         </Section>
         <Stack>
diff --git a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
index 850f69b34b1..ad50a4ecaf8 100644
--- a/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
+++ b/tgui/packages/tgui/interfaces/NtosPortraitPrinter.jsx
@@ -36,8 +36,7 @@ export const NtosPortraitPrinter = (props) => {
                     fluid
                     placeholder="Search Paintings..."
                     value={search_string}
-                    expensive
-                    onChange={(value) => {
+                    onBlur={(value) => {
                       act('search', {
                         to_search: value,
                       });
diff --git a/tgui/packages/tgui/interfaces/NtosScipaper.jsx b/tgui/packages/tgui/interfaces/NtosScipaper.jsx
index ab74203773d..22cd2b0165b 100644
--- a/tgui/packages/tgui/interfaces/NtosScipaper.jsx
+++ b/tgui/packages/tgui/interfaces/NtosScipaper.jsx
@@ -156,9 +156,8 @@ const PaperPublishing = (props) => {
             <Input
               mt={2}
               fluid
-              expensive
               value={author}
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('rewrite', {
                   author: value,
                 })
@@ -169,8 +168,7 @@ const PaperPublishing = (props) => {
             <Input
               fluid
               value={title}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('rewrite', {
                   title: value,
                 })
@@ -181,8 +179,7 @@ const PaperPublishing = (props) => {
             <Input
               fluid
               value={abstract}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('rewrite', {
                   abstract: value,
                 })
diff --git a/tgui/packages/tgui/interfaces/OreContainer.tsx b/tgui/packages/tgui/interfaces/OreContainer.tsx
index 6b60d48dd71..77f61dd6080 100644
--- a/tgui/packages/tgui/interfaces/OreContainer.tsx
+++ b/tgui/packages/tgui/interfaces/OreContainer.tsx
@@ -48,7 +48,6 @@ export const OreContainer = (props) => {
                 placeholder="Search Ore..."
                 value={searchItem}
                 onChange={setSearchItem}
-                expensive
                 fluid
               />
             </Section>
diff --git a/tgui/packages/tgui/interfaces/OreRedemptionMachine.tsx b/tgui/packages/tgui/interfaces/OreRedemptionMachine.tsx
index 100c204667b..f56cd71d6cc 100644
--- a/tgui/packages/tgui/interfaces/OreRedemptionMachine.tsx
+++ b/tgui/packages/tgui/interfaces/OreRedemptionMachine.tsx
@@ -301,6 +301,7 @@ function MaterialSearchHeader(props: SearchProps) {
         </Stack.Item>
         <Stack.Item>
           <SearchBar
+            expensive
             style={{ height: '23px' }}
             query={searchItem}
             placeholder="Search Material..."
diff --git a/tgui/packages/tgui/interfaces/Pandemic/Virus.tsx b/tgui/packages/tgui/interfaces/Pandemic/Virus.tsx
index a3a78f75e6d..ab236eb1a46 100644
--- a/tgui/packages/tgui/interfaces/Pandemic/Virus.tsx
+++ b/tgui/packages/tgui/interfaces/Pandemic/Virus.tsx
@@ -50,8 +50,7 @@ const Info = (props) => {
           <Input
             placeholder="Input a name"
             value={name === 'Unknown' ? '' : name}
-            expensive
-            onChange={(value) =>
+            onBlur={(value) =>
               act('rename_disease', {
                 index: index,
                 name: value,
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
index 4afb159dc81..439c1db0930 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
@@ -171,8 +171,7 @@ export const EntryGradient = (props: EntryGradientProps) => {
                   key={index}
                   maxWidth={'70px'}
                   value={entry.toString()}
-                  expensive
-                  onChange={(value) =>
+                  onBlur={(value) =>
                     act('edit', {
                       var: var_name,
                       new_value: gradient!.map((x, i) =>
@@ -367,8 +366,7 @@ export const EntryIconState = (props: EntryIconStateProps) => {
                 <Input
                   width="70px"
                   value={iconstate}
-                  expensive
-                  onChange={(value) =>
+                  onBlur={(value) =>
                     act('edit', {
                       var: var_name,
                       new_value: editKeyOf(icon_state, iconstate, value),
@@ -415,8 +413,7 @@ export const EntryIconState = (props: EntryIconStateProps) => {
           <>
             <Input
               value={icon_state ? icon_state : 'None'}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('edit', {
                   var: var_name,
                   new_value: value,
diff --git a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
index b4414e5a244..d2dc459d51a 100644
--- a/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
+++ b/tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
@@ -113,8 +113,7 @@ export const FloatGeneratorColor = (props: FloatGeneratorColorProps) => {
           <Stack.Item>
             <Input
               value={float?.toString()}
-              expensive
-              onChange={(value) =>
+              onBlur={(value) =>
                 act('edit', {
                   var: var_name,
                   new_value: value,
diff --git a/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx b/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
index 1495f4f8d58..6e4031ff08b 100644
--- a/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
+++ b/tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx
@@ -170,8 +170,7 @@ const Cache = (props: CacheProps) => {
         Query and cache:&nbsp;
         <Input
           value={props.cacheInput}
-          expensive
-          onChange={(value) => props.setCacheInput(value.toLowerCase())}
+          onBlur={(value) => props.setCacheInput(value.toLowerCase())}
         />
         <NumberInput
           step={1}
diff --git a/tgui/packages/tgui/interfaces/PortraitPicker.jsx b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
index d7628332665..7588d0c0bc5 100644
--- a/tgui/packages/tgui/interfaces/PortraitPicker.jsx
+++ b/tgui/packages/tgui/interfaces/PortraitPicker.jsx
@@ -26,8 +26,7 @@ export const PortraitPicker = (props) => {
                 fluid
                 placeholder="Search Paintings..."
                 value={search_string}
-                expensive
-                onChange={(value) => {
+                onBlur={(value) => {
                   act('search', {
                     to_search: value,
                   });
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx
index 987bed8c9f6..de4a66efe04 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx
@@ -144,7 +144,6 @@ function ChoicedSelection(props: ChoicedSelectionProps) {
               fluid
               placeholder="Search..."
               onChange={setSearchText}
-              expensive
             />
           </Section>
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/QuirksPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/QuirksPage.tsx
index 11dc9a2609f..2b75bd6cd4e 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/QuirksPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/QuirksPage.tsx
@@ -418,7 +418,6 @@ export function QuirksPage(props) {
               width="200px"
               value={searchQuery}
               onChange={setSearchQuery}
-              expensive
             />
           </Stack.Item>
           <Stack.Item grow className="PreferencesMenu__Quirks__QuirkList">
diff --git a/tgui/packages/tgui/interfaces/RequestManager.tsx b/tgui/packages/tgui/interfaces/RequestManager.tsx
index 8128c550acb..c2bc9bd7ad6 100644
--- a/tgui/packages/tgui/interfaces/RequestManager.tsx
+++ b/tgui/packages/tgui/interfaces/RequestManager.tsx
@@ -94,7 +94,6 @@ export const RequestManager = (props) => {
                   value={searchText}
                   onChange={setSearchText}
                   placeholder="Search..."
-                  expensive
                   mr={1}
                 />
               </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/SeedExtractor.tsx b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
index 0949dd88ec3..4792cd11d35 100644
--- a/tgui/packages/tgui/interfaces/SeedExtractor.tsx
+++ b/tgui/packages/tgui/interfaces/SeedExtractor.tsx
@@ -86,7 +86,6 @@ export const SeedExtractor = (props) => {
                   value={searchText}
                   onChange={setSearchText}
                   fluid
-                  expensive
                 />
               </Table.Cell>
               <Table.Cell collapsing p={1}>
diff --git a/tgui/packages/tgui/interfaces/SelectEquipment.jsx b/tgui/packages/tgui/interfaces/SelectEquipment.jsx
index 2d6665442d8..75bd49c77ce 100644
--- a/tgui/packages/tgui/interfaces/SelectEquipment.jsx
+++ b/tgui/packages/tgui/interfaces/SelectEquipment.jsx
@@ -76,7 +76,6 @@ export const SelectEquipment = (props) => {
                   placeholder="Search"
                   value={searchText}
                   onChange={setSearchText}
-                  expensive
                 />
               </Stack.Item>
               <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/SentienceFunBalloon.jsx b/tgui/packages/tgui/interfaces/SentienceFunBalloon.jsx
index 50c8080db69..f034f3d02c4 100644
--- a/tgui/packages/tgui/interfaces/SentienceFunBalloon.jsx
+++ b/tgui/packages/tgui/interfaces/SentienceFunBalloon.jsx
@@ -23,8 +23,7 @@ export const SentienceFunBalloon = (props) => {
                 <Input
                   fluid
                   value={group_name}
-                  expensive
-                  onChange={(value) =>
+                  onBlur={(value) =>
                     act('group_name', {
                       updated_name: value,
                     })
diff --git a/tgui/packages/tgui/interfaces/Spellbook.tsx b/tgui/packages/tgui/interfaces/Spellbook.tsx
index 216e197ddd5..a4166e68146 100644
--- a/tgui/packages/tgui/interfaces/Spellbook.tsx
+++ b/tgui/packages/tgui/interfaces/Spellbook.tsx
@@ -780,7 +780,6 @@ export const Spellbook = (props) => {
                     width={15}
                     placeholder="Search for a spell..."
                     onChange={setSpellSearch}
-                    expensive
                   />
                 </Stack.Item>
               </Stack>
diff --git a/tgui/packages/tgui/interfaces/StackCrafting.tsx b/tgui/packages/tgui/interfaces/StackCrafting.tsx
index b3bee5f3900..c9975e415bd 100644
--- a/tgui/packages/tgui/interfaces/StackCrafting.tsx
+++ b/tgui/packages/tgui/interfaces/StackCrafting.tsx
@@ -125,6 +125,7 @@ export const StackCrafting = (_props) => {
           title={'Amount: ' + amount}
           buttons={
             <SearchBar
+              expensive
               style={{ width: '15em' }}
               query={searchText}
               onSearch={(value) => setSearchText(value)}
diff --git a/tgui/packages/tgui/interfaces/Telecomms.jsx b/tgui/packages/tgui/interfaces/Telecomms.jsx
index 91f22f782a4..2458dc70e46 100644
--- a/tgui/packages/tgui/interfaces/Telecomms.jsx
+++ b/tgui/packages/tgui/interfaces/Telecomms.jsx
@@ -58,8 +58,7 @@ export const Telecomms = (props) => {
                 <Input
                   width={13}
                   value={id}
-                  expensive
-                  onChange={(value) => act('id', { value })}
+                  onBlur={(value) => act('id', { value })}
                 />
               }
             />
@@ -69,9 +68,8 @@ export const Telecomms = (props) => {
                 <Input
                   width={10}
                   value={network}
-                  expensive
                   placeholder="tcommsat"
-                  onChange={(value) => act('network', { value })}
+                  onBlur={(value) => act('network', { value })}
                 />
               }
             />
diff --git a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
index 01ad4ffa545..a8bf6c36064 100644
--- a/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/GenericUplink.tsx
@@ -81,7 +81,6 @@ export const GenericUplink = (props: GenericUplinkProps) => {
               placeholder="Search..."
               onChange={setSearchText}
               fluid
-              expensive
             />
           </Stack.Item>
           <Stack.Item grow>
diff --git a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
index e299d5d097a..13fdd776416 100644
--- a/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
+++ b/tgui/packages/tgui/interfaces/common/AtmosHandbook.tsx
@@ -59,8 +59,7 @@ const GasSearchBar = (props: {
         {activeInput ? (
           <Input
             fluid
-            expensive
-            onChange={(value) => {
+            onBlur={(value) => {
               setActiveInput(false);
               onChange(value);
             }}
diff --git a/tgui/packages/tgui/interfaces/common/SearchBar.tsx b/tgui/packages/tgui/interfaces/common/SearchBar.tsx
index 4d7ddd3a2ac..d12090b3f62 100644
--- a/tgui/packages/tgui/interfaces/common/SearchBar.tsx
+++ b/tgui/packages/tgui/interfaces/common/SearchBar.tsx
@@ -11,6 +11,8 @@ type RequiredProps = {
 type OptionalProps = Partial<{
   /** Whether the input should be focused on mount. */
   autoFocus: boolean;
+  /** Whether to debounce the input. For huge lists. */
+  expensive: boolean;
   /** Whether to show the search icon. */
   noIcon: boolean;
   /** The placeholder text. */
@@ -28,6 +30,7 @@ type Props = RequiredProps & OptionalProps;
 export function SearchBar(props: Props) {
   const {
     autoFocus,
+    expensive,
     noIcon = false,
     onSearch,
     placeholder = 'Search...',
@@ -43,7 +46,7 @@ export function SearchBar(props: Props) {
       <Stack.Item grow>
         <Input
           autoFocus={autoFocus}
-          expensive
+          expensive={expensive}
           fluid
           onChange={onSearch}
           placeholder={placeholder}