Merge pull request #2986 from IgniteUI/sstoyanov/fr-#2979

Close filter row on Esc
IgniteUI · Nov 12, 2018 · ae5233a · ae5233a
2 parents ab3b06e + b9a35d9
commit ae5233a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
@@ -172,6 +172,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    @HostListener('keydown.esc', ['$event'])
+    public onEscKeydown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+    }
+
     get disabled(): boolean {
         return !(this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0);
     }
@@ -254,6 +261,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             this.input.nativeElement.blur();
             this.inputGroupPrefix.nativeElement.focus();
             this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
+        } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ESCAPE_IE) {
+            event.preventDefault();
+            this.close();
         }
         event.stopPropagation();
     }

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -2452,6 +2452,27 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         expect(colOperands[0].nativeElement.innerText).toEqual('AND');
         expect(colIndicator.length).toEqual(0);
     }));
+
+    it('Should close FilterRow when Escape is pressed.', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxGridFilteringComponent);
+        fix.detectChanges();
+
+        const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+        const stringCellChip = initialChips[0].nativeElement;
+
+        stringCellChip.click();
+        fix.detectChanges();
+
+        let filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+        expect(filteringRow).toBeDefined();
+
+        GridFunctions.simulateKeyboardEvent(filteringRow, 'keydown', 'Esc');
+        fix.detectChanges();
+
+        filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+
+        expect(filteringRow).toBeNull();
+    }));
 });
 
 export class CustomFilter extends IgxFilteringOperand {