diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 3f3fee843d3..e6d79c42be0 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -696,6 +696,34 @@ describe("calcite-list", () => { } }); + it("filterPredicate will work without filterEnabled", async () => { + const matchingFont = "Courier"; + + const page = await newE2EPage(); + await page.setContent(html` + + + + + + `); + await page.waitForChanges(); + + await page.$eval("calcite-list", (list: List["el"]) => { + list.filterPredicate = (item) => { + return item.value === "item2"; + }; + }); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + + const visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])"); + + expect(visibleItems).toHaveLength(1); + expect(await visibleItems[0].getProperty("value")).toBe("item2"); + }); + it("filters initially", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index c159654d250..727cd3cdca0 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -101,7 +101,6 @@ export class List dragEnabled, el, filterEl, - filterEnabled, moveToItems, displayMode, scale, @@ -129,7 +128,7 @@ export class List } this.listItems = items; - if (filterEnabled && this.willPerformFilter) { + if (this.filterEnabled && this.willPerformFilter) { this.willPerformFilter = false; this.dataForFilter = this.getItemData(); @@ -438,7 +437,8 @@ export class List (changes.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "icon")) || (changes.has("displayMode") && this.hasUpdated) || - (changes.has("scale") && this.hasUpdated) + (changes.has("scale") && this.hasUpdated) || + (changes.has("filterPredicate") && this.hasUpdated) ) { this.handleListItemChange(); } @@ -814,14 +814,12 @@ export class List } private getItemData(): ItemData { - return this.filterPredicate - ? [] - : this.listItems.map((item) => ({ - label: item.label, - description: item.description, - metadata: item.metadata, - el: item, - })); + return this.listItems.map((item) => ({ + label: item.label, + description: item.description, + metadata: item.metadata, + el: item, + })); } private updateGroupItems(): void {