fix(query-builder): delete empty groups - 18.2.x

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

@@ -1918,6 +1918,51 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             verifyChildrenSelection(GridFunctions.getAdvancedFilteringTreeItem(fix, [1]), false);
         }));
 
+        it('Should remove all empty groups when clicking `delete` on a group\'s operator line\'s context menu.', fakeAsync(() => {
+            // Apply advanced filter through API.
+            const rootTree = new FilteringExpressionsTree(FilteringLogic.And);
+            rootTree.filteringOperands.push({
+                fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+            });
+            const firstTree = new FilteringExpressionsTree(FilteringLogic.And);
+            const secondTree = new FilteringExpressionsTree(FilteringLogic.Or);
+            const thirdTree = new FilteringExpressionsTree(FilteringLogic.And);
+            thirdTree.filteringOperands.push({
+                fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            thirdTree.filteringOperands.push({
+                fieldName: 'ProductName', searchVal: 's', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            secondTree.filteringOperands.push(thirdTree);
+            firstTree.filteringOperands.push(secondTree);
+            rootTree.filteringOperands.push(firstTree);
+            grid.advancedFilteringExpressionsTree = rootTree;
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            grid.openAdvancedFilteringDialog();
+            fix.detectChanges();
+
+            // Click group's outer operator line.
+            let middleGroupOperatorLine = GridFunctions.getAdvancedFilteringTreeGroupOperatorLine(fix, [1]);
+            middleGroupOperatorLine.click();
+            tick(200);
+            fix.detectChanges();
+
+            // Click on `delete` in the context menu.
+            let deleteBtn = fix.nativeElement.querySelector('.igx-filter-contextual-menu__delete-btn');
+            deleteBtn.click();
+            tick(200);
+            fix.detectChanges();
+
+            // Verify tree layout and remaining chip content
+            let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
+            expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
+            verifyExpressionChipContent(fix, [0], 'Downloads', 'Greater Than', '100');
+        }));
+
         it('Should open the operator dropdown below its respective input-group.', fakeAsync(() => {
             // Open Advanced Filtering dialog.
             grid.openAdvancedFilteringDialog();

projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts

@@ -767,12 +767,20 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public deleteGroup() {
-        const selectedGroup = this.contextualGroup;
-        const parent = selectedGroup.parent;
-        if (parent) {
-            const index = parent.children.indexOf(selectedGroup);
+        let selectedGroup = this.contextualGroup;
+        let parent = selectedGroup.parent;
+        if (!parent) {
+            this.rootGroup = null;
+        }
+
+        while (parent) {
+            let index = parent.children.indexOf(selectedGroup);
             parent.children.splice(index, 1);
-        } else {
+            selectedGroup = parent;
+            parent = parent.children.length === 0 ? parent.parent : null;
+        }
+
+        if (this.rootGroup?.children.length === 0) {
             this.rootGroup = null;
         }