From fb8661e31a443fd2e445568971bb05e9850b21ff Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 12 Nov 2018 11:27:40 +0200 Subject: [PATCH 1/2] feat(igx-grid): Close filter row on Esc, #2979 --- .../grids/filtering/grid-filtering-row.component.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 index 479bab93214..612abfd9e26 100644 --- 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(); } From b9a35d92727e7a6c845e11dd23852c146e4def2e Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 12 Nov 2018 16:04:15 +0200 Subject: [PATCH 2/2] test(igx-grid): Add test, #2979 --- .../lib/grids/grid/grid-filtering-ui.spec.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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 index feac4e4ba1c..6ddff54bedf 100644 --- 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 {