From 50f968596fd8177b4c472c8320fa67d815e7bea6 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Mon, 5 Oct 2020 17:28:34 +0300 Subject: [PATCH 01/11] fix(grid): Exec onOpening only once for esf #8138 --- .../lib/grids/filtering/grid-filtering.service.ts | 13 ++++++++----- .../src/lib/grids/headers/grid-header.component.ts | 3 ++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index f02f91eec47..329f4f7b70e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -3,7 +3,7 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data- import { IgxGridBaseDirective } from '../grid-base.directive'; import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { Subject } from 'rxjs'; -import { takeUntil, filter } from 'rxjs/operators'; +import { takeUntil, first } from 'rxjs/operators'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxColumnComponent } from '../columns/column.component'; import { IFilteringOperation } from '../../data-operations/filtering-condition'; @@ -101,9 +101,10 @@ export class IgxFilteringService implements OnDestroy { positionStrategy: new ExcelStylePositionStrategy(this._filterMenuPositionSettings), scrollStrategy: new AbsoluteScrollStrategy() }; - this._overlayService.onOpening.pipe( - filter((overlay) => overlay.id === this._componentOverlayId), + const overlayOpening = this._overlayService.onOpening.pipe( + first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { + console.log('args', eventArgs); const instance = this.grid.excelStyleFilteringComponent ? this.grid.excelStyleFilteringComponent : eventArgs.componentRef.instance as IgxGridExcelStyleFilteringComponent; @@ -114,8 +115,8 @@ export class IgxFilteringService implements OnDestroy { } }); - this._overlayService.onClosed.pipe( - filter(overlay => overlay.id === this._componentOverlayId), + const overlayClosed = this._overlayService.onClosed.pipe( + first(overlay => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { const instance = this.grid.excelStyleFilteringComponent ? this.grid.excelStyleFilteringComponent : @@ -127,6 +128,8 @@ export class IgxFilteringService implements OnDestroy { this._componentOverlayId = null; this.grid.navigation.activeNode = this.lastActiveNode; this.grid.theadRow.nativeElement.focus(); + overlayOpening.unsubscribe(); + overlayClosed.unsubscribe(); }); } diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index 5c53b8f05d2..a7f3bbecec2 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -144,7 +144,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy { ) { } public ngOnInit() { - this.grid.filteringService.initFilteringSettings(); + // this.grid.filteringService.initFilteringSettings(); } public ngDoCheck() { @@ -189,6 +189,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy { public onFilteringIconClick(event) { event.stopPropagation(); + this.grid.filteringService.initFilteringSettings(); this.grid.filteringService.toggleFilterDropdown(this.elementRef.nativeElement, this.column, IgxGridExcelStyleFilteringComponent); } From 0baf04d591870b344c8c4cfeddb2a4006b644720 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Tue, 6 Oct 2020 15:41:56 +0300 Subject: [PATCH 02/11] fix(grid): Fix esf onOpening event exec #8138 --- .../grids/filtering/grid-filtering.service.ts | 18 +++++++++++------- .../lib/test-utils/controls-functions.spec.ts | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 329f4f7b70e..249ff612fbf 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -3,7 +3,7 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data- import { IgxGridBaseDirective } from '../grid-base.directive'; import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { Subject } from 'rxjs'; -import { takeUntil, first } from 'rxjs/operators'; +import { takeUntil, filter, first } from 'rxjs/operators'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxColumnComponent } from '../columns/column.component'; import { IFilteringOperation } from '../../data-operations/filtering-condition'; @@ -115,8 +115,14 @@ export class IgxFilteringService implements OnDestroy { } }); + this._overlayService.onClosing.pipe( + first((overlay) => overlay.id === this._componentOverlayId), + takeUntil(this.destroy$)).subscribe(() => { + overlayOpening.unsubscribe(); + }); + const overlayClosed = this._overlayService.onClosed.pipe( - first(overlay => overlay.id === this._componentOverlayId), + first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { const instance = this.grid.excelStyleFilteringComponent ? this.grid.excelStyleFilteringComponent : @@ -128,8 +134,6 @@ export class IgxFilteringService implements OnDestroy { this._componentOverlayId = null; this.grid.navigation.activeNode = this.lastActiveNode; this.grid.theadRow.nativeElement.focus(); - overlayOpening.unsubscribe(); - overlayClosed.unsubscribe(); }); } @@ -366,7 +370,7 @@ export class IgxFilteringService implements OnDestroy { } if ((currExpressionUI.beforeOperator === undefined || currExpressionUI.beforeOperator === null || - currExpressionUI.beforeOperator === FilteringLogic.Or) && + currExpressionUI.beforeOperator === FilteringLogic.Or) && currExpressionUI.afterOperator === FilteringLogic.And) { currAndBranch = new FilteringExpressionsTree(FilteringLogic.And, columnId); @@ -493,8 +497,8 @@ export class IgxFilteringService implements OnDestroy { } private generateExpressionsListRecursive(expressions: IFilteringExpressionsTree | IFilteringExpression, - operator: FilteringLogic, - expressionsUIs: ExpressionUI[]): void { + operator: FilteringLogic, + expressionsUIs: ExpressionUI[]): void { if (!expressions) { return; } diff --git a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts index b61279c3f66..a530f565b01 100644 --- a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts @@ -30,7 +30,7 @@ export class ControlsFunction { } public static clickDropDownItem(fix: ComponentFixture, index: number) { - const list: HTMLElement = fix.nativeElement.querySelector(DROP_DOWN_SCROLL_CLASS); + const list: HTMLElement = document.body.querySelector(DROP_DOWN_SCROLL_CLASS); const items = list.querySelectorAll(DROP_DOWN__ITEM_CLASS); const item = items.item(index); UIInteractions.simulateClickEvent(item); From db440e99074a28e8a2ce84ccac7a531800510825 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Tue, 6 Oct 2020 16:44:37 +0300 Subject: [PATCH 03/11] fix(grid): Change test due to 8138 fix --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 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 eac67af0c08..ab283be4e28 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 @@ -5001,8 +5001,7 @@ function verifyExcelCustomFilterDisplayDensity(fix: ComponentFixture, expec } function verifyGridSubmenuDisplayDensity(gridNativeElement: HTMLElement, expectedDisplayDensity: DisplayDensity) { - const outlet = gridNativeElement.querySelector('.igx-grid__outlet'); - const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list')); + const dropdowns = Array.from(document.body.querySelectorAll('.igx-drop-down__list')); const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden')); const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item'); dropdownItems.forEach((dropdownItem) => { From 2ecc6c89c7a327bffa40477885b8af8652983bd6 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Wed, 7 Oct 2020 13:49:44 +0300 Subject: [PATCH 04/11] fix(grid): Fix esf subMenu to be in grid's outlet --- .../excel-style-conditional-filter.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index 5b3205fa2e1..76f60c76bc7 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -56,7 +56,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { this._subMenuOverlaySettings.outlet = (this.esf.grid as any).outlet; } }); - } + } ngOnDestroy(): void { this.destroy$.next(true); @@ -78,6 +78,9 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { public onTextFilterClick(eventArgs) { if (this.shouldOpenSubMenu) { this._subMenuOverlaySettings.target = eventArgs.currentTarget; + if (!this._subMenuOverlaySettings.outlet) { + this._subMenuOverlaySettings.outlet = this.esf.grid.outlet; + } const gridRect = this.esf.grid.nativeElement.getBoundingClientRect(); const dropdownRect = this.esf.mainDropdown.nativeElement.getBoundingClientRect(); @@ -147,7 +150,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { const exprTree = this.esf.column.filteringExpressionsTree; return exprTree && exprTree.filteringOperands && exprTree.filteringOperands.length && !((exprTree.filteringOperands[0] as IFilteringExpression).condition && - (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in'); + (exprTree.filteringOperands[0] as IFilteringExpression).condition.name === 'in'); } /** From c51b301f7afb48fad06bfbb4d0a673eed3a64842 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Wed, 7 Oct 2020 14:43:04 +0300 Subject: [PATCH 05/11] fix(grid): Revert tests change --- .../src/lib/grids/filtering/grid-filtering.service.ts | 2 +- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 3 ++- .../src/lib/test-utils/controls-functions.spec.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 249ff612fbf..0078edeb550 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -3,7 +3,7 @@ import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data- import { IgxGridBaseDirective } from '../grid-base.directive'; import { IFilteringExpression, FilteringLogic } from '../../data-operations/filtering-expression.interface'; import { Subject } from 'rxjs'; -import { takeUntil, filter, first } from 'rxjs/operators'; +import { takeUntil, first } from 'rxjs/operators'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxColumnComponent } from '../columns/column.component'; import { IFilteringOperation } from '../../data-operations/filtering-condition'; 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 ab283be4e28..eac67af0c08 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 @@ -5001,7 +5001,8 @@ function verifyExcelCustomFilterDisplayDensity(fix: ComponentFixture, expec } function verifyGridSubmenuDisplayDensity(gridNativeElement: HTMLElement, expectedDisplayDensity: DisplayDensity) { - const dropdowns = Array.from(document.body.querySelectorAll('.igx-drop-down__list')); + const outlet = gridNativeElement.querySelector('.igx-grid__outlet'); + const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list')); const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden')); const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item'); dropdownItems.forEach((dropdownItem) => { diff --git a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts index a530f565b01..a31da842f2d 100644 --- a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts @@ -30,7 +30,7 @@ export class ControlsFunction { } public static clickDropDownItem(fix: ComponentFixture, index: number) { - const list: HTMLElement = document.body.querySelector(DROP_DOWN_SCROLL_CLASS); + const list: HTMLElement = fix.nativeElement.body.querySelector(DROP_DOWN_SCROLL_CLASS); const items = list.querySelectorAll(DROP_DOWN__ITEM_CLASS); const item = items.item(index); UIInteractions.simulateClickEvent(item); From 07d8708b3310c7ad682700e09a94e8c0479d0abc Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Wed, 7 Oct 2020 14:52:05 +0300 Subject: [PATCH 06/11] chore(*): Remove forgotten console.log --- .../src/lib/grids/filtering/grid-filtering.service.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 0078edeb550..636eee85286 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -104,7 +104,6 @@ export class IgxFilteringService implements OnDestroy { const overlayOpening = this._overlayService.onOpening.pipe( first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { - console.log('args', eventArgs); const instance = this.grid.excelStyleFilteringComponent ? this.grid.excelStyleFilteringComponent : eventArgs.componentRef.instance as IgxGridExcelStyleFilteringComponent; From 3398992ca3d12f94cb4c2c713a5502f5bbe6f93e Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Wed, 7 Oct 2020 14:59:43 +0300 Subject: [PATCH 07/11] chore(*): Remove unnecessary variable --- .../src/lib/grids/filtering/grid-filtering.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 636eee85286..66af4be13b7 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -120,7 +120,7 @@ export class IgxFilteringService implements OnDestroy { overlayOpening.unsubscribe(); }); - const overlayClosed = this._overlayService.onClosed.pipe( + this._overlayService.onClosed.pipe( first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { const instance = this.grid.excelStyleFilteringComponent ? From 8f6b8048a23f0c3054e85cc39536ad07733076f0 Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Wed, 7 Oct 2020 15:30:31 +0300 Subject: [PATCH 08/11] fix(grid): Last updates to the fix --- .../excel-style-conditional-filter.component.ts | 9 +++++---- .../src/lib/grids/headers/grid-header.component.ts | 7 +------ .../src/lib/test-utils/controls-functions.spec.ts | 2 +- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index 76f60c76bc7..1648471d445 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -53,9 +53,13 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { constructor(public esf: IgxGridExcelStyleFilteringComponent) { this.esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.esf.grid) { - this._subMenuOverlaySettings.outlet = (this.esf.grid as any).outlet; + this._subMenuOverlaySettings.outlet = this.esf.grid.outlet; } }); + + if (this.esf.grid && !this._subMenuOverlaySettings.outlet) { + this._subMenuOverlaySettings.outlet = this.esf.grid.outlet; + } } ngOnDestroy(): void { @@ -78,9 +82,6 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { public onTextFilterClick(eventArgs) { if (this.shouldOpenSubMenu) { this._subMenuOverlaySettings.target = eventArgs.currentTarget; - if (!this._subMenuOverlaySettings.outlet) { - this._subMenuOverlaySettings.outlet = this.esf.grid.outlet; - } const gridRect = this.esf.grid.nativeElement.getBoundingClientRect(); const dropdownRect = this.esf.mainDropdown.nativeElement.getBoundingClientRect(); diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index a7f3bbecec2..7ec2274ff97 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -8,7 +8,6 @@ import { HostListener, Input, NgZone, - OnInit, OnDestroy } from '@angular/core'; import { DataType } from '../../data-operations/data-util'; @@ -31,7 +30,7 @@ import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/gr selector: 'igx-grid-header', templateUrl: './grid-header.component.html' }) -export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy { +export class IgxGridHeaderComponent implements DoCheck, OnDestroy { private _destroy$ = new Subject(); @@ -143,10 +142,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy { public zone: NgZone ) { } - public ngOnInit() { - // this.grid.filteringService.initFilteringSettings(); - } - public ngDoCheck() { this.getSortDirection(); this.cdr.markForCheck(); diff --git a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts index a31da842f2d..b61279c3f66 100644 --- a/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/controls-functions.spec.ts @@ -30,7 +30,7 @@ export class ControlsFunction { } public static clickDropDownItem(fix: ComponentFixture, index: number) { - const list: HTMLElement = fix.nativeElement.body.querySelector(DROP_DOWN_SCROLL_CLASS); + const list: HTMLElement = fix.nativeElement.querySelector(DROP_DOWN_SCROLL_CLASS); const items = list.querySelectorAll(DROP_DOWN__ITEM_CLASS); const item = items.item(index); UIInteractions.simulateClickEvent(item); From 7a8b1cb0d2c21046bd400d3d1fa1f2c7c46e28af Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Thu, 8 Oct 2020 17:25:32 +0300 Subject: [PATCH 09/11] feat(grid): Adressing PR comments --- .../lib/grids/filtering/grid-filtering.service.ts | 13 +++++-------- .../src/lib/grids/headers/grid-header.component.ts | 1 - 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 66af4be13b7..b7534642e6c 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -69,7 +69,9 @@ export class IgxFilteringService implements OnDestroy { } public toggleFilterDropdown(element, column, classRef) { - if (!this._componentOverlayId || (this.column && this.column.field !== column.field)) { + this.initFilteringSettings(); + + if (!this._componentOverlayId || (this.column && this.column.field !== column.field)) { this.column = column; const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon'; const filterIconTarget = element.querySelector('.' + filterIcon); @@ -101,7 +103,8 @@ export class IgxFilteringService implements OnDestroy { positionStrategy: new ExcelStylePositionStrategy(this._filterMenuPositionSettings), scrollStrategy: new AbsoluteScrollStrategy() }; - const overlayOpening = this._overlayService.onOpening.pipe( + + this._overlayService.onOpening.pipe( first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { const instance = this.grid.excelStyleFilteringComponent ? @@ -114,12 +117,6 @@ export class IgxFilteringService implements OnDestroy { } }); - this._overlayService.onClosing.pipe( - first((overlay) => overlay.id === this._componentOverlayId), - takeUntil(this.destroy$)).subscribe(() => { - overlayOpening.unsubscribe(); - }); - this._overlayService.onClosed.pipe( first((overlay) => overlay.id === this._componentOverlayId), takeUntil(this.destroy$)).subscribe((eventArgs) => { diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index 7ec2274ff97..3fa8efac331 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -184,7 +184,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { public onFilteringIconClick(event) { event.stopPropagation(); - this.grid.filteringService.initFilteringSettings(); this.grid.filteringService.toggleFilterDropdown(this.elementRef.nativeElement, this.column, IgxGridExcelStyleFilteringComponent); } From 5f567c88074954fb96b33a3a0ae7db452dd7643e Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Mon, 12 Oct 2020 13:59:25 +0300 Subject: [PATCH 10/11] fix(grid): PR comments change --- .../excel-style/excel-style-conditional-filter.component.ts | 2 +- .../src/lib/grids/filtering/grid-filtering.service.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index 1648471d445..2804ac6c99b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -57,7 +57,7 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { } }); - if (this.esf.grid && !this._subMenuOverlaySettings.outlet) { + if (this.esf.grid) { this._subMenuOverlaySettings.outlet = this.esf.grid.outlet; } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index c479e4fec07..366534daaf3 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -67,9 +67,8 @@ export class IgxFilteringService implements OnDestroy { } public toggleFilterDropdown(element, column, classRef) { - this.initFilteringSettings(); - if (!this._componentOverlayId || (this.column && this.column.field !== column.field)) { + this.initFilteringSettings(); this.column = column; const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon'; const filterIconTarget = element.querySelector('.' + filterIcon); From 93fc13202e52907a37c44eab66ff503075e03a8b Mon Sep 17 00:00:00 2001 From: Anastas Staev Date: Mon, 12 Oct 2020 14:49:41 +0300 Subject: [PATCH 11/11] fix(grid): Adding test for issue #8138 --- .../lib/grids/grid/grid-filtering-ui.spec.ts | 24 +++++++++++++++++++ .../src/lib/test-utils/grid-samples.spec.ts | 2 ++ 2 files changed, 26 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 ee11919898c..a9c145b4707 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 @@ -4761,6 +4761,30 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix); expect(loadingIndicator).toBeNull('esf loading indicator is visible'); })); + + it('Done callback should be executed only once per column', fakeAsync(() => { + const compInstance = fix.componentInstance as IgxGridFilteringESFLoadOnDemandComponent; + // Open excel style custom filtering dialog and wait a bit. + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(1000); + fix.detectChanges(); + + // Verify items in search have loaded and that the loading indicator is not visible. + expect(compInstance.doneCallbackCounter).toBe(1, 'Incorrect done callback execution count'); + let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix); + expect(listItems.length).toBe(6, 'incorrect rendered list items count'); + let loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix); + expect(loadingIndicator).toBeNull('esf loading indicator is visible'); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(1000); + fix.detectChanges(); + expect(compInstance.doneCallbackCounter).toBe(2, 'Incorrect done callback execution count'); + listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix); + expect(listItems.length).toBe(9, 'incorrect rendered list items count'); + loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix); + expect(loadingIndicator).toBeNull('esf loading indicator is visible'); + })); }); describe(null, () => { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 580a58b0edf..521278f6d0d 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1106,6 +1106,7 @@ export class CustomFilteringStrategyComponent extends BasicGridComponent { export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent { private _filteringStrategy = new FilteringStrategy(); public data = SampleTestData.excelFilteringData(); + public doneCallbackCounter = 0; public columnValuesStrategy = (column: IgxColumnComponent, columnExprTree: IFilteringExpressionsTree, @@ -1114,6 +1115,7 @@ export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent const filteredData = this._filteringStrategy.filter(this.data, columnExprTree); const columnValues = filteredData.map(record => record[column.field]); done(columnValues); + this.doneCallbackCounter++; }, 1000); } }