fix(filter, list): filter properly on initialization

src/components/filter/filter.e2e.ts

@@ -173,24 +173,36 @@ describe("calcite-filter", () => {
       });
     });
 
-    it.skip("updates filtered items after filtering", async () => {
-      const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
-      const waitForEvent = page.waitForEvent("calciteFilterChange");
+    it("updates filtered items after filtering", async () => {
       const filter = await page.find("calcite-filter");
+      const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
+      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForChanges();
+
+      expect(filterChangeSpy).toHaveReceivedEventTimes(0);
+      assertMatchingItems(await filter.getProperty("filteredItems"), [
+        "harry",
+        "matt",
+        "franco",
+        "katy",
+        "jon",
+        "regex"
+      ]);
+
+      const filterChangeEvent = page.waitForEvent("calciteFilterChange");
       await filter.callMethod("setFocus");
       await filter.type("developer");
-      await waitForEvent;
+      await filterChangeEvent;
 
       expect(filterChangeSpy).toHaveReceivedEventTimes(1);
-
       assertMatchingItems(await filter.getProperty("filteredItems"), ["harry", "matt", "franco", "jon"]);
 
-      await page.evaluate(() => {
-        const filter = document.querySelector("calcite-filter");
+      await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => {
         filter.items = filter.items.slice(3);
       });
-
       await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForChanges();
+
       assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
       expect(filterChangeSpy).toHaveReceivedEventTimes(1);
     });

src/components/filter/filter.tsx

@@ -152,7 +152,6 @@ export class Filter
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     this.updateFiltered(filter(this.items, this.value));
-    this.filter(this.value);
     await setUpMessages(this);
   }
 

src/components/list/list.e2e.ts

@@ -107,16 +107,15 @@ describe("calcite-list", () => {
     const list = await page.find("calcite-list");
     const filter = await page.find(`calcite-list >>> calcite-filter`);
     expect(await list.getProperty("filteredItems")).toHaveLength(2);
-    expect(await list.getProperty("filteredData")).toHaveLength(0);
+    expect(await list.getProperty("filteredData")).toHaveLength(2);
     expect(await list.getProperty("filterText")).toBeUndefined();
 
     await filter.callMethod("setFocus");
 
-    const calciteFilterChangeEvent = filter.waitForEvent("calciteFilterChange");
     const calciteListFilterEvent = page.waitForEvent("calciteListFilter");
     await page.keyboard.type("one");
     await page.waitForTimeout(debounceTimeout);
-    await calciteFilterChangeEvent;
+    await page.waitForChanges();
     await calciteListFilterEvent;
     expect(await list.getProperty("filteredItems")).toHaveLength(1);
     expect(await list.getProperty("filteredData")).toHaveLength(1);
@@ -127,27 +126,69 @@ describe("calcite-list", () => {
     await page.keyboard.press("Backspace");
     await page.waitForChanges();
 
-    const calciteFilterChangeEvent2 = filter.waitForEvent("calciteFilterChange");
     const calciteListFilterEvent2 = page.waitForEvent("calciteListFilter");
     await page.keyboard.type("two");
     await page.waitForTimeout(debounceTimeout);
-    await calciteFilterChangeEvent2;
+    await page.waitForChanges();
     await calciteListFilterEvent2;
     expect(await list.getProperty("filteredItems")).toHaveLength(1);
     expect(await list.getProperty("filteredData")).toHaveLength(1);
     expect(await list.getProperty("filterText")).toBe("two");
 
-    const calciteFilterChangeEvent3 = filter.waitForEvent("calciteFilterChange");
     const calciteListFilterEvent3 = page.waitForEvent("calciteListFilter");
     await page.keyboard.type("blah");
     await page.waitForTimeout(debounceTimeout);
-    await calciteFilterChangeEvent3;
+    await page.waitForChanges();
     await calciteListFilterEvent3;
     expect(await list.getProperty("filteredItems")).toHaveLength(0);
     expect(await list.getProperty("filteredData")).toHaveLength(0);
     expect(await list.getProperty("filterText")).toBe("twoblah");
   });
 
+  it("filters initially", async () => {
+    const page = await newE2EPage({
+      html: html`
+        <calcite-list filter-enabled filter-text="match">
+          <calcite-list-item
+            id="label-match"
+            label="match"
+            description="description-1"
+            value="value-1"
+          ></calcite-list-item>
+          <calcite-list-item
+            id="description-match"
+            label="label-2"
+            description="match"
+            value="value-1"
+          ></calcite-list-item>
+          <calcite-list-item
+            id="value-match"
+            label="label-3"
+            description="description-3"
+            value="match"
+          ></calcite-list-item>
+          <calcite-list-item
+            id="no-match"
+            label="label-4"
+            description="description-4"
+            value="value-4"
+          ></calcite-list-item>
+        </calcite-list>
+      `
+    });
+
+    const list = await page.find("calcite-list");
+    await page.waitForTimeout(debounceTimeout);
+    await page.waitForChanges();
+
+    expect(await list.getProperty("filteredData")).toHaveLength(3);
+    expect(await list.getProperty("filteredItems")).toHaveLength(3);
+
+    const visibleItems = await page.findAll("calcite-list-item:not([hidden])");
+
+    expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]);
+  });
+
   it("should update active item on init and click", async () => {
     const page = await newE2EPage({
       html: html`<calcite-list selection-mode="none">

src/components/list/list.tsx

@@ -391,7 +391,7 @@ export class List implements InteractiveComponent, LoadableComponent {
     }));
   };
 
-  private updateListItems = debounce((): void => {
+  private updateListItems(): void {
     const { selectionAppearance, selectionMode } = this;
     const items = this.queryListItems();
     items.forEach((item) => {
@@ -406,7 +406,7 @@ export class List implements InteractiveComponent, LoadableComponent {
     this.setActiveListItem();
     this.updateSelectedItems();
     this.updateFilteredItems();
-  }, debounceTimeout);
+  }
 
   queryListItems = (): HTMLCalciteListItemElement[] => {
     return Array.from(this.el.querySelectorAll(listItemSelector));