From 881aee3ae95407dabd9f962b36f7b9da629abdac Mon Sep 17 00:00:00 2001 From: IBarakov Date: Tue, 7 Apr 2020 14:51:27 +0300 Subject: [PATCH 1/3] fix(filter-ui): fix date filtering and chip commit #6594 --- .../base/grid-filtering-row.component.html | 5 +- .../base/grid-filtering-row.component.ts | 8 +- .../lib/grids/grid/grid-filtering-ui.spec.ts | 86 +++++++++++++++++++ .../src/lib/test-utils/grid-functions.spec.ts | 8 +- 4 files changed, 100 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html index 4d70b2ac3e1..77c7f1db47b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html @@ -67,8 +67,9 @@ [value]="value | igxdate: filteringService.grid.locale" [readonly]="true" (keydown)="onInputKeyDown($event)"/> - - clear + + done + clear diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index 344d59ff2d0..9bd23b5dd7f 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -444,9 +444,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { } requestAnimationFrame(() => { const focusedElement = document.activeElement; - if (focusedElement.className === 'igx-chip__remove') { + + if (focusedElement.className === 'igx-chip__remove' || focusedElement.tagName === 'IGX-DAY-ITEM') { return; } + if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement)) && this.dropDownConditions.collapsed) { this.commitInput(); @@ -494,7 +496,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { */ public onDateSelected(value: Date) { this.value = value; - this.commitInput(); } /** @@ -543,11 +544,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit { public onChipClick(args, item: ExpressionUI) { if (this._cancelChipClick) { + this._cancelChipClick = false; return; } - this._cancelChipClick = false; - this.expressionsList.forEach(ex => ex.isSelected = false); this.toggleChip(item); 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 c730200403e..621ad9bcca0 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 @@ -1986,6 +1986,92 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const headerChip = GridFunctions.getFilterChipsForColumn('ProductName', fix); expect(headerChip.length).toBe(1); })); + + it('Should commit the input and new chip after focus out and should edit chip without creating new one.', fakeAsync(() => { + // Click date filter chip to show filter row. + const dateFilterCellChip = GridFunctions.getFilterChipsForColumn('ReleaseDate', fix)[0]; + dateFilterCellChip.nativeElement.click(); + tick(100); + fix.detectChanges(); + + // Click input to open calendar. + const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + const inputDebugElement = filteringRow.query(By.directive(IgxInputDirective)); + const input = inputDebugElement.nativeElement; + input.click(); + tick(100); + fix.detectChanges(); + + // Click the today date. + const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; + let calendar = outlet.getElementsByClassName('igx-calendar')[0]; + const todayDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date--current'); + todayDayItem.focus(); + todayDayItem.click(); + tick(100); + fix.detectChanges(); + + // Verify the newly added chip is selected. + const chip = GridFunctions.getFilterConditionChip(fix, 0); + const chipDiv = chip.querySelector('.igx-chip__item'); + + expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'initial chip is committed'); + + // Focus out + grid.nativeElement.focus(); + grid.filteringRow.onInputGroupFocusout(); + tick(200); + fix.detectChanges(); + + expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'initial chip is not committed'); + expect(input.value).toBe('', 'initial input value is present and not committed'); + + chip.click(); + tick(200); + fix.detectChanges(); + + // Open calendar + input.click(); + tick(100); + fix.detectChanges(); + + calendar = outlet.getElementsByClassName('igx-calendar')[0]; + + // View years + const yearView: HTMLElement = calendar.querySelectorAll('.igx-calendar-picker__date')[1] as HTMLElement; + yearView.click(); + tick(100); + fix.detectChanges(); + + // Select the first year + const firstYear: HTMLElement = calendar.querySelectorAll('.igx-calendar__year')[0] as HTMLElement; + firstYear.click(); + tick(100); + fix.detectChanges(); + + // Select the first day + const firstDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date'); + firstDayItem.focus(); + firstDayItem.click(); + tick(100); + fix.detectChanges(); + + expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'chip is committed'); + + // Focus out + grid.nativeElement.focus(); + grid.filteringRow.onInputGroupFocusout(); + tick(200); + fix.detectChanges(); + expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is selected'); + + // Check if we still have only one committed chip + const chipsLength = GridFunctions.getAllFilterConditionChips(fix).length; + + expect(chipsLength).toBe(1, 'there is more than one chip'); + expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(false, 'chip is not committed'); + expect(input.value).toBe('', 'input value is present and not committed'); + })); }); describe('Integration scenarios', () => { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index f635bf55164..d6ca2d4e3d1 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -1185,10 +1185,16 @@ export class GridFunctions { } public static getFilterConditionChip(fix, index) { + const conditionChips = this.getAllFilterConditionChips(fix); + + return conditionChips[index]; + } + + public static getAllFilterConditionChips(fix) { const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); const conditionChips = GridFunctions.sortNativeElementsHorizontally( filterUIRow.queryAll(By.directive(IgxChipComponent)).map((ch) => ch.nativeElement)); - return conditionChips[index]; + return conditionChips; } public static getFilterRowPrefix(fix): DebugElement { From 2da0713d37af5a3c84bc0841e36eaa2c39ba7368 Mon Sep 17 00:00:00 2001 From: IBarakov Date: Tue, 7 Apr 2020 15:44:03 +0300 Subject: [PATCH 2/3] chore(*): remove obsolete test #6594 --- .../lib/grids/grid/grid-filtering-ui.spec.ts | 25 ------------------- 1 file changed, 25 deletions(-) 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 621ad9bcca0..21f25431fce 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 @@ -1355,31 +1355,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { verifyFilterRowUI(input, close, reset); })); - it('Should commit the input and new chip after picking date from calendar for filtering.', fakeAsync(() => { - GridFunctions.clickFilterCellChip(fix, 'ReleaseDate'); - - // Click input to open calendar. - const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); - const input = filteringRow.query(By.directive(IgxInputDirective)); - input.triggerEventHandler('click', null); - tick(100); - fix.detectChanges(); - - // Click the today date. - const outlet = document.getElementsByClassName('igx-grid__outlet')[0]; - const calendar = outlet.getElementsByClassName('igx-calendar')[0]; - const todayDayItem = calendar.querySelector('.igx-calendar__date--current'); - (todayDayItem).click(); - tick(200); - fix.detectChanges(); - - // Verify the chip and input are committed. - const filterChip = filteringRow.query(By.directive(IgxChipComponent)); - expect(filterChip).toBeTruthy(); - expect(filterChip.componentInstance.selected).toBeFalsy(); - expect(input.nativeElement.value).toEqual(''); - })); - it('Should navigate keyboard focus correctly between the filter row and the grid cells.', fakeAsync(() => { GridFunctions.clickFilterCellChip(fix, 'ProductName'); From 3a6a275b0ae2f6d3c84533d6d0a4627f276d37d2 Mon Sep 17 00:00:00 2001 From: IBarakov Date: Tue, 7 Apr 2020 16:21:50 +0300 Subject: [PATCH 3/3] chore(*): focusout after date click --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 2 ++ 1 file changed, 2 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 21f25431fce..8562e7a23d2 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 @@ -1983,6 +1983,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const todayDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date--current'); todayDayItem.focus(); todayDayItem.click(); + grid.filteringRow.onInputGroupFocusout(); tick(100); fix.detectChanges(); @@ -2028,6 +2029,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const firstDayItem: HTMLElement = calendar.querySelector('.igx-calendar__date'); firstDayItem.focus(); firstDayItem.click(); + grid.filteringRow.onInputGroupFocusout(); tick(100); fix.detectChanges();