fix(grid): keep conditionName in sync on condition changed callback [20.1.x] (#16924)

* fix(grid): keep conditionName in sync on condition changed callback

* test(grid): add conditionName sync coverage for Excel-style custom filter dialog (#16933)

* Initial plan

* test(grid): add conditionName sync test for ESF custom filter dialog

Co-authored-by: hanastasov <14248932+hanastasov@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: hanastasov <14248932+hanastasov@users.noreply.github.com>

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: hanastasov <14248932+hanastasov@users.noreply.github.com>

Author: hanastasov

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -584,6 +584,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     public onConditionsChanged(eventArgs) {
         const value = (eventArgs.newSelection as IgxDropDownItemComponent).value;
         this.expression.condition = this.getCondition(value);
+        this.expression.conditionName = value;
         if (this.expression.condition.isUnary) {
             // update grid's filtering on the next cycle to ensure the drop-down is closed
             // if the drop-down is not closed this event handler will be invoked multiple times

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts

@@ -152,6 +152,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     public onConditionsChanged(eventArgs: any) {
         const value = (eventArgs.newSelection as IgxSelectComponent).value;
         this.expressionUI.expression.condition = this.getCondition(value);
+        this.expressionUI.expression.conditionName = value;
 
         this.focus();
     }

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

@@ -147,6 +147,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick();
             fix.detectChanges();
 
+            let operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'startsWith', 'Net');
             verifyFilterUIPosition(filterUIRow, grid);
             verifyFilterRowUI(input, close, reset, false);
             expect(grid.rowList.length).toEqual(1);
@@ -156,6 +160,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.openFilterDDAndSelectCondition(fix, 3);
             GridFunctions.typeValueInFilterRowInput('script', fix, input);
 
+            operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'endsWith', 'script');
             expect(grid.rowList.length).toEqual(2);
             verifyFilterRowUI(input, close, reset, false);
 
@@ -3831,6 +3839,33 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(grid.filteredData.length).toEqual(1);
         }));
 
+        it('Should keep conditionName in sync when changing condition in ESF custom dialog.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            // Open custom dialog with 'contains' condition (index 0 in cascade menu for string column)
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+
+            // set first expression's value
+            GridFunctions.setInputValueESF(fix, 0, 'Net');
+            tick(100);
+
+            // change first expression's operator from 'contains' to 'startsWith' (index 2 for string column)
+            GridFunctions.setOperatorESF(fix, 0, 2);
+            tick(100);
+
+            GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
+
+            const operands =
+                (grid.filteringExpressionsTree.filteringOperands[0] as IFilteringExpressionsTree)
+                    .filteringOperands as IFilteringExpression[];
+            verifyFilteringExpression(operands[0], 'ProductName', 'startsWith', 'Net');
+        }));
+
         it('Should filter grid via custom dialog - 3 expressions.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Released');
 
@@ -7519,6 +7554,7 @@ const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: Siz
 const verifyFilteringExpression = (operand: IFilteringExpression, fieldName: string, conditionName: string, searchVal: any) => {
     expect(operand.fieldName).toBe(fieldName);
     expect(operand.condition.name).toBe(conditionName);
+    expect(operand.conditionName).toBe(conditionName);
     expect(operand.searchVal).toEqual(searchVal);
 };