From 5c15857e0ff0a49528c88fe9160c2e4c9bb124fc Mon Sep 17 00:00:00 2001
From: plamenamiteva <plamenamiteva@abv.bg>
Date: Mon, 27 Jul 2020 14:06:18 +0300
Subject: [PATCH] feat(combo): made filtering pipe pure #7282

---
 .../src/lib/combo/combo.component.html               |  4 ++--
 .../src/lib/combo/combo.component.spec.ts            |  8 ++++----
 .../src/lib/combo/combo.component.ts                 | 12 ++++++++++++
 .../igniteui-angular/src/lib/combo/combo.pipes.ts    |  5 ++---
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
index e53ab15574c..cce3cdc81fc 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.html
+++ b/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">
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
index 0042ce6d203..caedcec1633 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -2005,7 +2005,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);
 
             firstFilter = [...combo.filteredData];
@@ -2013,14 +2013,14 @@ describe('igxCombo', () => {
             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);
 
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
index a73a48c92ef..d1140fbcf2c 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.component.ts
+++ b/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++;
+    }
 }
 
 /**
diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
index 1e3a707c41b..22e14e0c6e7 100644
--- a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
+++ b/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 [];
         }