[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
🆑
fix: Tgui inputs have been tweaked again to fix issues and seem more
responsive.
/🆑

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,

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,

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,

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,
                 })

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,
                   })

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,

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,
                   })

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"

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) {

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,
                   })

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..."
           />

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%"

tgui/packages/tgui/interfaces/CrewConsole.tsx

@@ -187,7 +187,6 @@ const CrewTable = () => {
           <Input
             placeholder="Search for name..."
             onChange={setSearchQuery}
-            expensive
             value={searchQuery}
           />
         </>

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,
                   })

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...'}

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: {

tgui/packages/tgui/interfaces/FishAnalyzer.tsx

@@ -89,7 +89,6 @@ export const FishAnalyzer = (props) => {
                   value={searchText}
                   onChange={setSearchText}
                   fluid
-                  expensive
                 />
               </Section>
             </Stack.Item>

tgui/packages/tgui/interfaces/ForceEvent.tsx

@@ -120,7 +120,6 @@ function PanelOptions(props) {
           onChange={setSearchQuery}
           placeholder="Search..."
           value={searchQuery}
-          expensive
         />
       </Stack.Item>
       <Stack.Item>

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 })
               }
             />

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,

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)}

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,
                   })

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,

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 })
                 }
               />

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,
                 })

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,
               })

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,
                   })

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);

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,
                   })

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,
                       })

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,
                   })

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] });
             }}

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"

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}

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,
             })

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,
               })

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,
                   })

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}

tgui/packages/tgui/interfaces/NtosNetDownloader.tsx

@@ -144,7 +144,6 @@ export const NtosNetDownloader = (props) => {
             fluid
             value={searchItem}
             onChange={setSearchItem}
-            expensive
           />
         </Section>
         <Stack>

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,
                       });

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,
                 })

tgui/packages/tgui/interfaces/OreContainer.tsx

@@ -48,7 +48,6 @@ export const OreContainer = (props) => {
                 placeholder="Search Ore..."
                 value={searchItem}
                 onChange={setSearchItem}
-                expensive
                 fluid
               />
             </Section>

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..."

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,

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,

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,

tgui/packages/tgui/interfaces/PlayerTicketHistory.tsx

@@ -170,8 +170,7 @@ const Cache = (props: CacheProps) => {
         Query and cache: 
         <Input
           value={props.cacheInput}
-          expensive
-          onChange={(value) => props.setCacheInput(value.toLowerCase())}
+          onBlur={(value) => props.setCacheInput(value.toLowerCase())}
         />
         <NumberInput
           step={1}

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,
                   });

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>

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">

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>

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}>

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>

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,
                     })

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>

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)}

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 })}
                 />
               }
             />

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>

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);
             }}

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}