fix(list): Don't require filterEnabled for filterPredicate usage (#…

…11109) **Related Issue:** #6544 ## Summary - fix to not require filterEnabled to use filterPredicate - It was basically the `(changes.has("filterPredicate") && this.hasUpdated)` that was the culprit. - add test BEGIN_COMMIT_OVERRIDE END_COMMIT_OVERRIDE
Esri · Feb 8, 2025 · 4f4d79b · 4f4d79b
1 parent a7dbe1d
commit 4f4d79b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git 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`
+        <calcite-list>
+          <calcite-list-item value="item1" label="${matchingFont}" description="list1"></calcite-list-item>
+          <calcite-list-item value="item2" label="${matchingFont} 2" description="list1"></calcite-list-item>
+          <calcite-list-item value="item3" label="Other Font" description="list1"></calcite-list-item>
+        </calcite-list>
+      `);
+      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
@@ -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 {