feat(combo): made filtering pipe pure #7282

Author: PlamenaMiteva

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

@@ -41,7 +41,7 @@
             aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
         <igx-suffix *ngIf="showSearchCaseIcon">
             <igx-icon fontSet="case-sensitive" name="case-sensitive" [isActive]="filteringOptions.caseSensitive"
-                (click)="filteringOptions.caseSensitive=!filteringOptions.caseSensitive">
+                (click)="toggleCaseSensitive()">
             </igx-icon>
         </igx-suffix>
     </igx-input-group>
@@ -51,7 +51,7 @@
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
         <igx-combo-item role="option" [itemHeight]='itemHeight' *igxFor="let item of data
-            | comboFiltering:searchValue:displayKey:filterable:filteringOptions
+            | comboFiltering:searchValue:displayKey:filterable:filteringOptions:filteringPipeTrigger
             | comboGrouping:groupKey:valueKey;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -2005,22 +2005,22 @@ describe('igxCombo', () => {
             combo.searchValue = 'New ';
             combo.handleInputChange();
             fixture.detectChanges();
-            expect(filterSpy).toHaveBeenCalledTimes(2);
+            expect(filterSpy).toHaveBeenCalledTimes(1);
             expect(combo.filteredData.length).toBeLessThan(initialData.length);
 
             firstFilter = [...combo.filteredData];
             combo.searchValue += '  ';
             combo.handleInputChange();
             fixture.detectChanges();
             expect(combo.filteredData.length).toBeLessThan(initialData.length);
-            expect(filterSpy).toHaveBeenCalledTimes(4);
+            expect(filterSpy).toHaveBeenCalledTimes(2);
 
             combo.searchValue = '';
             combo.handleInputChange();
             fixture.detectChanges();
             expect(combo.filteredData.length).toEqual(initialData.length);
             expect(combo.filteredData.length).toBeGreaterThan(firstFilter.length);
-            expect(filterSpy).toHaveBeenCalledTimes(6);
+            expect(filterSpy).toHaveBeenCalledTimes(3);
             expect(combo.filteredData.length).toEqual(initialData.length);
         });
         it('should properly select/deselect filteredData', () => {
@@ -2033,7 +2033,7 @@ describe('igxCombo', () => {
             combo.searchValue = 'New ';
             combo.handleInputChange();
             fixture.detectChanges();
-            expect(filterSpy).toHaveBeenCalledTimes(2);
+            expect(filterSpy).toHaveBeenCalledTimes(1);
             expect(combo.filteredData.length).toBeLessThan(initialData.length);
             expect(combo.filteredData.length).toEqual(4);
 

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

@@ -165,6 +165,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     public filteringOptions: IComboFilteringOptions = {
         caseSensitive: false
     };
+    /**
+     * @hidden @internal
+     */
+    public filteringPipeTrigger = 0;
     protected stringFilters = IgxStringFilteringOperand;
     protected booleanFilters = IgxBooleanFilteringOperand;
     protected _groupKey = '';
@@ -1578,6 +1582,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     public handleClosed() {
         this.onClosed.emit();
     }
+
+    /**
+     * @hidden @internal
+     */
+    public toggleCaseSensitive() {
+        this.filteringOptions.caseSensitive = !this.filteringOptions.caseSensitive;
+        this.filteringPipeTrigger++;
+    }
 }
 
 /**

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

@@ -11,12 +11,11 @@ import { IComboFilteringOptions } from './combo.component';
  * @hidden
  */
 @Pipe({
-    name: 'comboFiltering',
-    pure: false
+    name: 'comboFiltering'
 })
 export class IgxComboFilteringPipe implements PipeTransform {
     public transform(collection: any[], searchValue: any, displayKey: any,
-                    shouldFilter: boolean, filteringOptions: IComboFilteringOptions) {
+                    shouldFilter: boolean, filteringOptions: IComboFilteringOptions, pipeTrigger: number) {
         if (!collection) {
             return [];
         }