fix(advanced-filtering): commit changes on applying (#12277)

* fix(adv-filtering): commit changes on applying

* fix(adv-filtering): use QB exitOperandEdit method

Co-authored-by: Teodosia Hristodorova <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -11,6 +11,7 @@ import { DisplayDensity } from '../../../core/displayDensity';
 import { IgxQueryBuilderComponent } from '../../../query-builder/query-builder.component';
 import { CurrentResourceStrings } from '../../../core/i18n/resources';
 import { GridResourceStringsEN } from '../../../core/i18n/grid-resources';
+import { IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
 
 /**
  * A component used for presenting advanced filtering UI for a Grid.
@@ -176,7 +177,8 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
      */
     public applyChanges(event?: Event) {
         this.grid.crudService.endEdit(false, event);
-        this.grid.advancedFilteringExpressionsTree = this.queryBuilder.createExpressionTreeFromGroupItem(this.queryBuilder.rootGroup);
+        this.queryBuilder.exitOperandEdit();
+        this.grid.advancedFilteringExpressionsTree = this.queryBuilder.expressionTree as IFilteringExpressionsTree;
     }
 
     /**

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

@@ -908,6 +908,80 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(GridFunctions.getAdvancedFilteringInitialAddGroupButtons(fix).length).toBe(2);
         }));
 
+        it('Should apply filters on Apply button click without prior Commit button click', fakeAsync(() => {
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+            selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            UIInteractions.clickAndSendInputElementValue(input, 'ign', fix); // Type filter value.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify the filter results.
+            expect(grid.filteredData.length).toEqual(2);
+            expect(grid.rowList.length).toBe(2);
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
+            expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
+        }));
+
+        it('Should close the dialog on Apply button click if not all expression inputs are set', fakeAsync(() => {
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify the dialog is closed an no records are filtered
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+            
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+            selectOperatorInEditModeExpression(fix, 2); // Select 'Starts With' operator.
+
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull();
+            expect(grid.filteredData).toBe(null);
+        }));
+
         it('Column dropdown should contain only filterable columns.', fakeAsync(() => {
             // Open Advanced Filtering dialog.
             grid.openAdvancedFilteringDialog();