fix(esf): clear search criteria when selecting "Clear column filters" option

Author: onlyexeption

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -129,6 +129,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.virtDir.resetScrollPosition();
         });
+
+        esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.clearInput();
+        });
     }
 
     public ngAfterViewInit() {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -284,6 +284,12 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     @Output()
     public columnChange = new EventEmitter<IgxColumnComponent>();
 
+    /**
+     * @hidden @internal
+     */
+    @Output()
+    public listDataLoaded = new EventEmitter();
+
     /**
      * @hidden @internal
      */
@@ -549,6 +555,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         if (!(this.cdr as any).destroyed) {
             this.cdr.detectChanges();
         }
+
+        this.listDataLoaded.emit();
     }
 
     private getColumnFilterExpressionsTree() {

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4377,6 +4377,49 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(listItems[3].innerText).toBe('custoM', 'incorrect list item label');
             expect(listItems[4].innerText).toBe('custom', 'incorrect list item label');
         }));
+
+        it('Should clear search criteria when selecting clear column filters option.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            let checkboxes: any = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix));
+
+            tick(100);
+            fix.detectChanges();
+
+            checkboxes[0].click();
+            tick();
+            fix.detectChanges();
+
+            checkboxes[2].click();
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick(100);
+            fix.detectChanges();
+
+            expect(grid.filteredData.length).toEqual(1);
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'Net', fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+
+            GridFunctions.clickClearFilterInExcelStyleFiltering(fix);
+            fix.detectChanges();
+            flush();
+
+            expect(grid.filteredData).toBeNull();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'search criteria is not cleared');
+
+            checkboxes = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix));
+            expect(checkboxes.every(ch => ch.checked)).toBeTrue();
+        }));
     });
 
     describe('Templates: ', () => {
@@ -4729,7 +4772,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
-
     });
 });