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) {
+ 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) {
+ 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) {
+ onBlur={(value) =>
dispatch(
updateHighlightSetting({
id: id,
@@ -170,12 +169,11 @@ function TextHighlightSetting(props) {
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 ? (
{
+ 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) {