Merge pull request #8370 from IgniteUI/ibarakov/fix-8334-master

Clear search input on ESC

Author: DiyanDimitrov

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

@@ -250,9 +250,19 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public onInputKeyDown(event): void {
-        if (event.key === KEYS.ENTER) {
-            event.preventDefault();
-            this.applyFilter();
+        switch (event.key) {
+            case KEYS.ENTER:
+                event.preventDefault();
+                this.applyFilter();
+
+                return;
+            case KEYS.ESCAPE || KEYS.ESCAPE_IE:
+                if (this.searchValue) {
+                    event.stopPropagation();
+                    this.clearInput();
+                }
+
+                return;
         }
     }
 

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

@@ -4587,6 +4587,11 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             // Open excel style filtering dialog.
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
 
+            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+
+            // Verify ESF is visible.
+            expect(excelMenu).not.toBeNull();
+
             // Type string in search box.
             const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
             const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
@@ -4609,10 +4614,43 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 .sort();
 
             // Verify that excel style filtering dialog is closed and data is filtered.
-            expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).toBeNull();
             expect(gridCellValues.length).toEqual(4);
             expect(gridCellValues).toEqual(listItems);
         }));
+
+        it('Should clear input if there is text and \'Escape\' is pressed.', fakeAsync(() => {
+            // Open excel style filtering dialog.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+
+            // Verify ESF is visible.
+            expect(excelMenu).not.toBeNull();
+
+             // Verify that the dialog is closed on pressing Escape.
+            inputNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).toBeNull();
+
+            // Open excel style filtering dialog again and type in the input.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '2', fix);
+
+            // Press Escape again and verify that ESF menu is still visible and the input is empty
+            inputNativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            fix.detectChanges();
+            flush();
+
+            excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            expect(excelMenu).not.toBeNull();
+            expect(inputNativeElement.value).toBe('', 'input isn\'t cleared correctly');
+        }));
 });
 
     describe('Templates: ', () => {