fix(filter-ui): hide filtering row on column hide #6520

Author: onlyexeption

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -253,6 +253,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                 this.grid.summaryService.resetSummaryHeight();
                 this.grid.filteringService.refreshExpressions();
                 this.grid.notifyChanges();
+                this.grid.filteringService.hideColumnFilteringRowOnVisibilityChange(this);
                 // this.grid.refreshSearch(true);
             }
         }

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

@@ -114,13 +114,17 @@ export class IgxFilteringService implements OnDestroy {
                     filterCell.updateFilterCellArea();
                 });
             });
+        }
+    }
 
-            this.grid.onColumnVisibilityChanged.pipe(takeUntil(this.destroy$)).subscribe((eventArgs: IColumnVisibilityChangedEventArgs) => {
-                if (this.grid.filteringRow && this.grid.filteringRow.column === eventArgs.column ) {
-                    this.grid.filteringRow.close();
+    /**
+     * Internal method to create expressionsTree and filter grid used in both filter modes.
+     */
+    public hideColumnFilteringRowOnVisibilityChange(col: IgxColumnComponent) {
+        const filteringRow = col.grid.filteringRow;
 
-                }
-            });
+        if (filteringRow && filteringRow.column) {
+            filteringRow.close();
         }
     }
 

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

@@ -3350,43 +3350,24 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(grid.rowList.length).toBe(3);
         });
 
-        it('Should close filter row when hide the current column', (async () => {
-            grid.height = '700px';
-            grid.showToolbar = true;
-            grid.columnHiding = true;
-            fix.detectChanges();
-            await wait(16);
-
-            const prodNameCol = grid.columns.find((col) => col.field === 'ProductName');
-            GridFunctions.verifyColumnIsHidden(prodNameCol, false, 6);
-
+        fit('Should close filter row when hide the current column', fakeAsync(() => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
-            fix.detectChanges();
 
             // Check that the filterRow is opened
-            const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
             expect(filterUIRow).not.toBeNull();
 
             // Add first chip.
             GridFunctions.typeValueInFilterRowInput('a', fix);
-            await wait(16);
-
-            const hideButton = GridFunctions.getColumnHidingButton(fix);
-            hideButton.focus();
-            fix.detectChanges();
-            await wait(16);
-            hideButton.click();
-            fix.detectChanges();
-            await wait(100);
+            tick(100);
 
-            const dropDown = fix.debugElement.query(By.css('igx-column-hiding'));
-            HelperUtils.getCheckboxInput('ProductName', dropDown, fix).click();
+            grid.getColumnByName('ProductName').hidden = true;
+            tick(100);
             fix.detectChanges();
-            await wait(100);
 
             // Check that the filterRow is closed
-            expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
-            GridFunctions.verifyColumnIsHidden(prodNameCol, true, 5);
+            filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).toBeNull();
         }));
 
         it('Unary conditions should be committable', fakeAsync(() => {