diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index d9f33bcc..acde487b 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -46,15 +46,39 @@ */ export let ref = null; - import { tick, getContext } from "svelte"; + import { tick, getContext, afterUpdate, onMount } from "svelte"; import Search from "../Search/Search.svelte"; const ctx = getContext("DataTable") ?? {}; + let rows = null; + let unsubscribe = null; + $: if (shouldFilterRows) { - filteredRowIds = ctx?.filterRows(value, shouldFilterRows); + unsubscribe = ctx?.tableRows.subscribe((tableRows) => { + // Only update if the rows have actually changed. + // This approach works in both Svelte 4 and Svelte 5. + if (JSON.stringify(tableRows) !== JSON.stringify(rows)) { + rows = tableRows; + } + }); + } else { + rows = null; } + onMount(() => { + return () => { + unsubscribe?.(); + }; + }); + + afterUpdate(() => { + // Only filter rows in a callback to avoid an infinite update loop. + if (rows !== null) { + filteredRowIds = ctx?.filterRows(value, shouldFilterRows); + } + }); + async function expandSearch() { await tick(); if (disabled || persistent || expanded) return; diff --git a/tests/DataTable/DataTableSearch.test.ts b/tests/DataTable/DataTableSearch.test.ts index 71758718..2a721bd8 100644 --- a/tests/DataTable/DataTableSearch.test.ts +++ b/tests/DataTable/DataTableSearch.test.ts @@ -182,8 +182,7 @@ describe("DataTableSearch", () => { }); }); - // TODO: fix reactivity - it.skip("re-filters rows when toggled", async () => { + it("re-filters rows when toggled", async () => { render(DataTableSearch); allRowsRendered();