fix(ESF): Fix ExpressionChangedAfterItHasBeenCheckedError on opening ESF with a conditional filter. #16244

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -7,8 +7,8 @@
         [igxDropDownItemNavigation]="subMenu"
         role="menuitem"
         aria-haspopup="true"
-        [attr.aria-controls]="this.subMenu?.listId"
-        [attr.aria-activedescendant]="!this.subMenu?.collapsed ? this.subMenu?.focusedItem?.id : null">
+        [attr.aria-controls]="subMenu?.listId"
+        [attr.aria-activedescendant]="!subMenu?.collapsed ? subMenu?.focusedItem?.id : null">
         <span class="igx-excel-filter__filter-number">
             {{ subMenuText }}
             @if (filterNumber > 0) { ({{filterNumber}}) }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -43,7 +43,8 @@ import {
     IgxGridExternalESFTemplateComponent,
     IgxGridDatesFilteringComponent,
     LoadOnDemandFilterStrategy,
-    IgxGridFilteringNumericComponent
+    IgxGridFilteringNumericComponent,
+    IgxGridConditionalFilteringComponent
 } from '../../test-utils/grid-samples.spec';
 import { GridSelectionMode, FilterMode, Size } from '../common/enums';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
@@ -7080,6 +7081,27 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         }));
 
     });
+
+    describe('IgxGrid - Conditional Filter', () => {
+        let fix: ComponentFixture<IgxGridConditionalFilteringComponent>;
+        let grid: IgxGridComponent;
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridConditionalFilteringComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+            grid.filterMode = FilterMode.excelStyleFilter;
+            fix.detectChanges();
+        }));
+
+        it('Should not throw console error on opening the drop-down.', async () => {
+            spyOn(console, 'error');
+            GridFunctions.clickExcelFilterIconFromCodeAsync(fix, grid, 'Downloads');
+            fix.detectChanges();
+            await wait(100);
+
+            expect(console.error).not.toHaveBeenCalled();
+        });
+    });
 });
 
 describe('IgxGrid - Custom Filtering Strategy #grid', () => {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -13,7 +13,7 @@ import { IgxColumnComponent } from '../grids/columns/column.component';
 import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
 import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
-import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
+import { ISortingOptions, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
 import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
 import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
@@ -2761,3 +2761,33 @@ export class ObjectCloneStrategy implements IDataCloneStrategy {
 export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent {
     public override data = SampleTestData.foodProductData();
 }
+
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
+                <igx-grid-excel-style-filtering>
+                <igx-excel-style-filter-operations>
+                    <igx-excel-style-conditional-filter></igx-excel-style-conditional-filter>
+                </igx-excel-style-filter-operations>
+            </igx-grid-excel-style-filtering>
+        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
+            [filterable]="false" [resizable]="resizable"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
+        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"></igx-column>
+        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
+            [filterable]="filterable" [resizable]="resizable" dataType="date">
+        </igx-column>
+        <igx-column width="100px" [field]="'ReleaseDateTime'" [header]="'ReleaseDateTime'" headerClasses="header-release-date-time"
+            [filterable]="filterable" [resizable]="resizable" dataType="dateTime">
+        </igx-column>
+        <igx-column width="100px" [field]="'ReleaseTime'" [header]="'ReleaseTime'" headerClasses="header-release-time"
+            [filterable]="filterable" [resizable]="resizable" dataType="time">
+        </igx-column>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
+            dataType="string" [filters]="customFilter">
+        </igx-column>
+    </igx-grid>`,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxExcelStyleConditionalFilterComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleFilterOperationsTemplateDirective]
+})
+export class IgxGridConditionalFilteringComponent extends IgxGridFilteringComponent {
+}