feat(list): add matchFields property to specify which fields to filte…

…r against. #9619
Esri · Jun 17, 2024 · d7342e3 · d7342e3
1 parent 5d9509b
commit d7342e3
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -3003,6 +3003,10 @@ export namespace Components {
           * When `true`, a busy indicator is displayed.
          */
         "loading": boolean;
+        /**
+          * Specifies the fields to match against when filtering. If not set, all fields will be matched.
+         */
+        "matchFields": string[];
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -10890,6 +10894,10 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Specifies the fields to match against when filtering. If not set, all fields will be matched.
+         */
+        "matchFields"?: string[];
         /**
           * Use this property to override individual strings used by the component.
          */

diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -66,6 +66,10 @@ describe("calcite-list", () => {
         propertyName: "dragEnabled",
         defaultValue: false,
       },
+      {
+        propertyName: "matchFields",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -373,6 +377,51 @@ describe("calcite-list", () => {
     expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]);
   });
 
+  it("filters initially with matchFields", async () => {
+    const page = await newE2EPage();
+    await page.setContent(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>
+    `);
+
+    await page.waitForChanges();
+    const list = await page.find("calcite-list");
+    list.setProperty("matchFields", ["label", "description"]);
+    await page.waitForChanges();
+    await page.waitForTimeout(listDebounceTimeout);
+
+    expect(await list.getProperty("filteredItems")).toHaveLength(2);
+    expect(await list.getProperty("filteredData")).toHaveLength(2);
+
+    const visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])");
+
+    expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match"]);
+  });
+
   it("should support shift click to select multiple items", async () => {
     const clickItemContent = (item: HTMLCalciteListItemElement, selector: string) => {
       item.shadowRoot.querySelector(selector).dispatchEvent(new MouseEvent("click", { bubbles: true, shiftKey: true }));

diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
@@ -160,6 +160,16 @@ export class List
    */
   @Prop({ reflect: true }) loading = false;
 
+  /**
+   * Specifies the fields to match against when filtering. If not set, all fields will be matched.
+   */
+  @Prop() matchFields: string[];
+
+  @Watch("matchFields")
+  async handleMatchFieldsChange(): Promise<void> {
+    this.performFilter();
+  }
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -517,6 +527,7 @@ export class List
       hasFilterActionsStart,
       hasFilterActionsEnd,
       hasFilterNoResults,
+      matchFields,
     } = this;
     return (
       <InteractiveContainer disabled={this.disabled}>
@@ -549,6 +560,7 @@ export class List
                         aria-label={filterPlaceholder}
                         disabled={disabled}
                         items={dataForFilter}
+                        matchFields={matchFields}
                         onCalciteFilterChange={this.handleFilterChange}
                         placeholder={filterPlaceholder}
                         ref={this.setFilterEl}
@@ -804,13 +816,14 @@ export class List
   }
 
   private async performFilter(): Promise<void> {
-    const { filterEl, filterText } = this;
+    const { filterEl, filterText, matchFields } = this;
 
     if (!filterEl) {
       return;
     }
 
     filterEl.value = filterText;
+    filterEl.matchFields = matchFields;
     await filterEl.filter(filterText);
     this.updateFilteredData();
   }