diff --git a/frontend/src/lib/components/FilterBar/FilterBar.svelte b/frontend/src/lib/components/FilterBar/FilterBar.svelte
index b7d3586f3e..2beba93a64 100644
--- a/frontend/src/lib/components/FilterBar/FilterBar.svelte
+++ b/frontend/src/lib/components/FilterBar/FilterBar.svelte
@@ -13,18 +13,19 @@
 <script lang="ts">
   import type { ConditionalPick } from 'type-fest';
   import Loader from '$lib/components/Loader.svelte';
-  import { DebouncedInput } from '$lib/forms';
+  import { PlainInput } from '$lib/forms';
   import { pick } from '$lib/util/object';
   import t from '$lib/i18n';
   import type { Writable } from 'svelte/store';
   import Dropdown from '../Dropdown.svelte';
-  import { Previous } from 'runed';
+  import { Previous, Debounced, watch } from 'runed';
+  import { DEFAULT_DEBOUNCE_TIME } from '$lib/util/time';
 
   type DumbFilters = $$Generic<Record<string, unknown>>;
   // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
   type Filters = DumbFilters & Record<typeof searchKey, string>;
 
-  let searchInput: DebouncedInput | undefined = $state();
+  let searchInput: PlainInput | undefined = $state();
 
   interface Props {
     searchKey: keyof ConditionalPick<DumbFilters, string>;
@@ -57,6 +58,17 @@
     filterSlot,
   }: Props = $props();
   let undebouncedSearch: string | undefined = $state(undefined);
+  let watcher: () => string | undefined;
+  if (debounce === false) {
+    watcher = () => undebouncedSearch;
+  } else {
+    const debounceTime: number = debounce === true ? DEFAULT_DEBOUNCE_TIME : debounce;
+    const debouncer = new Debounced(() => undebouncedSearch, debounceTime);
+    watcher = () => debouncer.current;
+  }
+  watch(watcher, (value) => {
+    $allFilters[searchKey] = value as Filters[typeof searchKey];
+  });
 
   function onClearFiltersClick(): void {
     if (!searchInput) return;
@@ -103,10 +115,8 @@
 <div class="input filter-bar input-bordered flex items-center gap-2 py-1.5 px-2 flex-wrap h-[unset] min-h-12">
   {@render activeFilterSlot?.({ activeFilters })}
   <div class="flex grow">
-    <DebouncedInput
-      bind:value={$allFilters[searchKey]}
-      {debounce}
-      bind:undebouncedValue={undebouncedSearch}
+    <PlainInput
+      bind:value={undebouncedSearch}
       bind:this={searchInput}
       placeholder={$t('filter.placeholder')}
       style="seach-input border-none h-8 px-1 focus:outline-none min-w-[120px] flex-grow"
diff --git a/frontend/src/lib/forms/DebouncedInput.svelte b/frontend/src/lib/forms/DebouncedInput.svelte
deleted file mode 100644
index 30c3717612..0000000000
--- a/frontend/src/lib/forms/DebouncedInput.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { DEFAULT_DEBOUNCE_TIME } from '$lib/util/time';
-  import { Debounced } from 'runed';
-  import PlainInput, { type PlainInputProps } from './PlainInput.svelte';
-
-  let input: PlainInput | undefined = $state();
-
-  export function clear(): void {
-    debouncer.setImmediately(undefined);
-    input?.clear();
-  }
-
-  export function focus(): void {
-    input?.focus();
-  }
-
-  export function setValue(newValue: string | undefined | null): void {
-    debouncer.setImmediately(newValue);
-    value = undebouncedValue = newValue;
-  }
-
-  interface Props extends PlainInputProps {
-    debounce?: number | boolean;
-    undebouncedValue?: string | null;
-  }
-
-  let {
-    value = $bindable(),
-    debounce = true,
-    undebouncedValue = $bindable(),
-    ...rest
-  }: Props = $props();
-
-  $effect(() => {
-    undebouncedValue = value;
-  });
-
-  const debounceTime: number = $derived(
-    typeof debounce === 'boolean' ? (debounce ? DEFAULT_DEBOUNCE_TIME : 0) : debounce,
-  );
-
-  const debouncer = new Debounced(
-    () => undebouncedValue,
-    () => debounceTime,
-  );
-  $effect(() => {
-    value = debouncer.current;
-  });
-</script>
-
-<PlainInput bind:this={input} bind:value={undebouncedValue} {...rest} />
diff --git a/frontend/src/lib/forms/index.ts b/frontend/src/lib/forms/index.ts
index 1211aeeb47..4fb3d66350 100644
--- a/frontend/src/lib/forms/index.ts
+++ b/frontend/src/lib/forms/index.ts
@@ -5,7 +5,6 @@ import FormField from './FormField.svelte';
 import FormError from './FormError.svelte';
 import Input from './Input.svelte';
 import PlainInput from './PlainInput.svelte';
-import DebouncedInput from './DebouncedInput.svelte';
 import Checkbox from './Checkbox.svelte';
 import ProtectedForm, { type Token } from './ProtectedForm.svelte';
 import MaybeProtectedForm from './MaybeProtectedForm.svelte';
@@ -29,7 +28,6 @@ export {
   FormError,
   Input,
   PlainInput,
-  DebouncedInput,
   ProtectedForm,
   MaybeProtectedForm,
   Select,