Skip to content

Fix flaky Playwright tests by getting rid of DebouncedInput #1666

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rmunn wants to merge 2 commits into from
Closed

Fix flaky Playwright tests by getting rid of DebouncedInput #1666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2fb6ac3
Have FilterBar do its own debouncing
rmunn May 15, 2025
5cb2bca
Delete DebouncedInput component completely
rmunn May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions frontend/src/lib/components/FilterBar/FilterBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down Expand Up @@ -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];
});
Comment on lines +69 to +71

@coderabbitai coderabbitai Bot May 15, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Re-assign the store instead of mutating it in-place

$allFilters[searchKey] = … mutates the underlying object without emitting a set, so Svelte subscribers will not be notified and downstream derived values/UI will not update.
Re-assign the store value (or use allFilters.update) to preserve reactivity.

-  $allFilters[searchKey] = value as Filters[typeof searchKey];
+  $allFilters = {
+    ...$allFilters,
+    [searchKey]: value as Filters[typeof searchKey],
+  };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
watch(watcher, (value) => {
$allFilters[searchKey] = value as Filters[typeof searchKey];
});
watch(watcher, (value) => {
- $allFilters[searchKey] = value as Filters[typeof searchKey];
+ $allFilters = {
+ ...$allFilters,
+ [searchKey]: value as Filters[typeof searchKey],
+ };
});
🤖 Prompt for AI Agents 
In frontend/src/lib/components/FilterBar/FilterBar.svelte around lines 69 to 71,
the code mutates the $allFilters store object directly, which does not trigger
Svelte reactivity updates. To fix this, re-assign the entire store value by
creating a new object that copies the existing filters and updates the searchKey
property, or use the allFilters.update method to update the store reactively.
This ensures subscribers and derived values are properly notified and UI updates
accordingly.


function onClearFiltersClick(): void {
if (!searchInput) return;
Expand Down Expand Up @@ -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"
Expand Down
51 changes: 0 additions & 51 deletions frontend/src/lib/forms/DebouncedInput.svelte
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions frontend/src/lib/forms/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,7 +28,6 @@ export {
FormError,
Input,
PlainInput,
DebouncedInput,
ProtectedForm,
MaybeProtectedForm,
Select,
Expand Down
Loading