From a5efee7fd392febef0347fcb53a3873a8b973d2a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 18 Dec 2024 17:17:15 -0800
Subject: [PATCH 1/3] fix(list): Don't require `filterEnabled` for
 `filterPredicate` usage. #6544

---
 packages/calcite-components/src/components/list/list.e2e.ts | 2 +-
 packages/calcite-components/src/components/list/list.tsx    | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 3f3fee843d3..dc30eab8870 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -652,7 +652,7 @@ describe("calcite-list", () => {
 
       const page = await newE2EPage();
       await page.setContent(html`
-        <calcite-list filter-enabled filter-text="">
+        <calcite-list filter-text="">
           <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>
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index c159654d250..0bba4f4215b 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.filterPredicate) && this.willPerformFilter) {
       this.willPerformFilter = false;
       this.dataForFilter = this.getItemData();
 

From 8a2e865f63d7aca1a7f369298a13862d66411be9 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 18 Dec 2024 17:26:46 -0800
Subject: [PATCH 2/3] cleanup

---
 .../src/components/list/list.tsx              | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 0bba4f4215b..727cd3cdca0 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -128,7 +128,7 @@ export class List
     }
 
     this.listItems = items;
-    if ((this.filterEnabled || !!this.filterPredicate) && this.willPerformFilter) {
+    if (this.filterEnabled && this.willPerformFilter) {
       this.willPerformFilter = false;
       this.dataForFilter = this.getItemData();
 
@@ -437,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();
     }
@@ -813,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 {

From 45b4fc3ad04b9b4692b955d62f91e312926cf138 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 18 Dec 2024 17:33:14 -0800
Subject: [PATCH 3/3] cleanup test

---
 .../src/components/list/list.e2e.ts           | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index dc30eab8870..e6d79c42be0 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -652,7 +652,7 @@ describe("calcite-list", () => {
 
       const page = await newE2EPage();
       await page.setContent(html`
-        <calcite-list filter-text="">
+        <calcite-list filter-enabled filter-text="">
           <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>
@@ -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`