Merge pull request #5733 from IgniteUI/astaev/issue5548-master

fix(fitlering): Close filter row when hide current column #5548

Author: DiyanDimitrov

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

@@ -12,6 +12,7 @@ import { IgxDatePipeComponent } from '../grid.common';
 import { IgxColumnComponent } from '../column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { GridBaseAPIService } from '../api.service';
+import { IColumnVisibilityChangedEventArgs } from '../grid';
 
 const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
@@ -113,6 +114,13 @@ 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();
+
+                }
+            });
         }
     }
 

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

@@ -3336,6 +3336,44 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(chips.length).toBe(2);
             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);
+
+            GridFunctions.clickFilterCellChip(fix, 'ProductName');
+            fix.detectChanges();
+
+            // Check that the filterRow is opened
+            const 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();
+            await wait(100);
+            hideButton.click();
+            await wait(100);
+            fix.detectChanges();
+
+            const dropDown = fix.debugElement.query(By.css('igx-column-hiding'));
+            HelperUtils.getCheckboxInput('ProductName', dropDown,  fix).click();
+            await wait(100);
+            fix.detectChanges();
+
+            // Check that the filterRow is closed
+            expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
+            GridFunctions.verifyColumnIsHidden(prodNameCol, true , 5);
+        }));
     });
 
     describe(null, () => {