refactor(combos): move default filter function to combo pipe

Author: wnvko

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -396,7 +396,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      */
      @Input()
      public get filterFunction(): (collection: any[], searchValue: any, caseSensitive: boolean) => any[] {
-         return this._customFilterFunction || this._defaultFilterFunction;
+         return this._customFilterFunction;
      }
 
      public set filterFunction(value: (collection: any[], searchValue: any, caseSensitive: boolean) => any[]) {
@@ -876,21 +876,6 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     protected destroy$ = new Subject<any>();
     protected _onTouchedCallback: () => void = noop;
     protected _onChangeCallback: (_: any) => void = noop;
-    protected _defaultFilterFunction = (collection: any[], searchValue: any, matchCase: boolean): any[] => {
-        if (!searchValue) {
-            return collection;
-        }
-        const searchTerm = matchCase ? searchValue.trim() : searchValue.toLowerCase().trim();
-        if (this.displayKey != null) {
-            return collection.filter(e => matchCase ?
-                e[this.displayKey]?.includes(searchTerm) :
-                e[this.displayKey]?.toString().toLowerCase().includes(searchTerm));
-        } else {
-            return collection.filter(e => matchCase ?
-                e.includes(searchTerm) :
-                e.toString().toLowerCase().includes(searchTerm));
-        }
-    }
 
     private _type = null;
     private _dataType = '';

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -57,7 +57,7 @@
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
         [attr.aria-activedescendant]="this.activeDescendant">
         <igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data
-            | comboFiltering:filterFunction:filterValue:filteringOptions:filterable
+            | comboFiltering:filterFunction:filterValue:filteringOptions:filterable:displayKey
             | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex" [role]="item.isHeader? 'group' : 'option'">

projects/igniteui-angular/src/lib/combo/combo.pipes.ts

@@ -20,18 +20,38 @@ export class IgxComboCleanPipe implements PipeTransform {
     name: 'comboFiltering'
 })
 export class IgxComboFilteringPipe implements PipeTransform {
+    private displayKey: any;
+    private _defaultFilterFunction = (collection: any[], searchValue: any, matchCase: boolean): any[] => {
+        if (!searchValue) {
+            return collection;
+        }
+        const searchTerm = matchCase ? searchValue.trim() : searchValue.toLowerCase().trim();
+        if (this.displayKey != null) {
+            return collection.filter(e => matchCase ?
+                e[this.displayKey]?.includes(searchTerm) :
+                e[this.displayKey]?.toString().toLowerCase().includes(searchTerm));
+        } else {
+            return collection.filter(e => matchCase ?
+                e.includes(searchTerm) :
+                e.toString().toLowerCase().includes(searchTerm));
+        }
+    }
+
     public transform(
         collection: any[],
         filterFunction: (collection: any[], searchValue: any, caseSensitive: boolean) => any[],
         searchValue: any,
         filteringOptions: IComboFilteringOptions,
-        filterable: boolean = true) {
+        filterable: boolean,
+        displayKey: any) {
         if (!collection) {
             return [];
         }
         if (!filterable) {
             return collection;
         }
+        this.displayKey = displayKey;
+        filterFunction = filterFunction ?? this._defaultFilterFunction;
         return filterFunction(collection, searchValue, filteringOptions.caseSensitive);
     }
 }

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html

@@ -58,7 +58,7 @@
         <igx-combo-item  [role]="item.isHeader? 'group' : 'option'" [singleMode]="true"
         [itemHeight]='itemHeight' (click)="handleItemClick()" *igxFor="let item of data
             | comboClean
-            | comboFiltering:filterFunction:filterValue:filteringOptions
+            | comboFiltering:filterFunction:filterValue:filteringOptions:true:displayKey
             | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">