mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(toolbar-search): re-filter rows if DataTable
rows change
This commit is contained in:
parent
b034378277
commit
6e6f4858af
2 changed files with 27 additions and 4 deletions
|
@ -46,14 +46,38 @@
|
|||
*/
|
||||
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) {
|
||||
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();
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue