From 2fb6ac3773dd4b825c68a595b79a2e0ccfd3a0e9 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 15 May 2025 10:42:16 +0700
Subject: [PATCH 1/2] Have FilterBar do its own debouncing

Don't use DebouncedInput in FilterBar as it's causing Playwright test
failures where links briefly aren't clickable. Doing the debouncing
directly in FilterBar eliminates the issue.
---
 .../lib/components/FilterBar/FilterBar.svelte | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

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"

From 5cb2bca1afcdd71ad528eab7124c89772d9e1180 Mon Sep 17 00:00:00 2001
From: Robin Munn <rmunn@pobox.com>
Date: Thu, 15 May 2025 11:05:23 +0700
Subject: [PATCH 2/2] Delete DebouncedInput component completely

No longer used anywhere
---
 frontend/src/lib/forms/DebouncedInput.svelte | 51 --------------------
 frontend/src/lib/forms/index.ts              |  2 -
 2 files changed, 53 deletions(-)
 delete mode 100644 frontend/src/lib/forms/DebouncedInput.svelte

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,