Merge pull request #7327 from IgniteUI/ddincheva/advanceFilterClose

Close advanced filter dialog when escape is pressed

Author: zdrawku

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -797,9 +797,11 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
      */
     public onKeyDown(eventArgs: KeyboardEvent) {
         eventArgs.stopPropagation();
-        if (!this.contextMenuToggle.collapsed &&
-            (eventArgs.key === KEYS.ESCAPE || eventArgs.key === KEYS.ESCAPE_IE)) {
+        const key = eventArgs.key;
+        if (!this.contextMenuToggle.collapsed && (key === KEYS.ESCAPE || key === KEYS.ESCAPE_IE)) {
             this.clearSelection();
+        } else if (key === KEYS.ESCAPE || key === KEYS.ESCAPE_IE) {
+            this.closeDialog();
         }
     }
 
@@ -1072,6 +1074,9 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         if (this._overlayComponentId) {
             this._overlayService.hide(this._overlayComponentId);
         }
+        if (this.grid.navigation.activeNode && this.grid.navigation.activeNode.row === -1) {
+            (this.grid as any).theadRow.nativeElement.focus();
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts

@@ -421,6 +421,35 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => {
             expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
         });
 
+        it('Advanced Filtering: Should be able to close Advanced filtering with "escape"',  fakeAsync(() => {
+            // Enable Advanced Filtering
+            grid.allowAdvancedFiltering = true;
+            fix.detectChanges();
+            let header = GridFunctions.getColumnHeader('Name', fix);
+            UIInteractions.simulateClickAndSelectEvent(header);
+            fix.detectChanges();
+
+            // Verify first header is focused
+            GridFunctions.verifyHeaderIsFocused(header.parent);
+
+            UIInteractions.triggerEventHandlerKeyDown('L', gridHeader, true);
+            fix.detectChanges();
+
+            // Verify AF dialog is opened.
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).not.toBeNull();
+
+            const afDialog = fix.nativeElement.querySelector('.igx-advanced-filter');
+            UIInteractions.triggerKeyDownEvtUponElem('Escape', afDialog);
+            tick(DEBOUNCETIME);
+            fix.detectChanges();
+
+            // Verify AF dialog is closed.
+            header = GridFunctions.getColumnHeader('Name', fix);
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            GridFunctions.verifyHeaderIsFocused(header.parent);
+        }));
+
+
         it('Column selection: Should be able to select columns when columnSelection is multi', () => {
             const columnID = grid.getColumnByName('ID');
             const columnParentID = grid.getColumnByName('ParentID');