fix(filter-row): close filterRow #6005

Author: tachojelev

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

@@ -62,7 +62,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
     @HostBinding('class.igx-grid__filtering-cell')
     public cssClass = 'igx-grid__filtering-cell';
 
-    constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService) {
+    constructor(public cdr: ChangeDetectorRef, public filteringService: IgxFilteringService, public element: ElementRef) {
         this.filteringService.subscribeToEvents();
     }
 

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

@@ -477,7 +477,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
 
         this.filteringService.filteredColumn = null;
         this.filteringService.selectedExpression = null;
-        this.cdr.detectChanges();
 
         this.chipAreaScrollOffset = 0;
         this.transform(this.chipAreaScrollOffset);

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -996,6 +996,11 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     set filterMode(value) {
         this._filterMode = value;
+
+        if (this.filteringService.isFilterRowVisible) {
+            this.filteringRow.close();
+        }
+        this.notifyChanges(true);
     }
 
     /**
@@ -4345,6 +4350,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return pagingHeight;
     }
 
+    /**
+     * @hidden
+     */
+    protected getFilterCellHeight(): number {
+        const headerGroupNativeEl = (this.headerGroupsList.length !== 0) ?
+                                        this.headerGroupsList[0].element.nativeElement : null;
+        const filterCellNativeEl = (headerGroupNativeEl) ?
+                                    headerGroupNativeEl.querySelector('igx-grid-filtering-cell') : null;
+        return (filterCellNativeEl) ? filterCellNativeEl.offsetHeight : 0;
+    }
+
     /**
      * @hidden
      */
@@ -4353,12 +4369,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             return null;
         }
 
-
+        const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
+                                 this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
+                                 this.theadRow.nativeElement.offsetHeight;
         const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
-        const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
+        const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
             this.scr.nativeElement.clientHeight;
 

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

@@ -3421,6 +3421,34 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             tick(100);
             expect(chip.componentInstance.selected).toBeTruthy();
     }));
+
+    it('Should close filterRow when changing filterMode from \'quickFilter\' to \'excelStyleFilter\'', (async () => {
+        GridFunctions.clickFilterCellChip(fix, 'ProductName');
+        fix.detectChanges();
+
+        // Add a condition chip without submitting it.
+        GridFunctions.typeValueInFilterRowInput('a', fix);
+        await wait(16);
+
+        // Change filterMode to 'excelStyleFilter`
+        grid.filterMode = FilterMode.excelStyleFilter;
+        fix.detectChanges();
+
+        // Verify the the filterRow is closed.
+        const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+        expect(filterUIRow).toBeNull('filterRow is visible');
+
+        // Verify the ESF icons are visible.
+        const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
+        const thead = gridNativeElement.querySelector('.igx-grid__thead-wrapper');
+        const filterIcons = thead.querySelectorAll('.igx-excel-filter__icon');
+        expect(filterIcons.length).toEqual(4, 'incorrect esf filter icons count');
+
+        // Verify the condition was submitted.
+        const header = GridFunctions.getColumnHeader('ProductName', fix);
+        const activeFilterIcon = header.nativeElement.querySelector('.igx-excel-filter__icon--filtered');
+        expect(activeFilterIcon).toBeDefined('no active filter icon was found');
+    }));
 });
     describe(null, () => {
         let fix, grid;
@@ -3629,6 +3657,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
         let fix, grid;
         beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(IgxGridFilteringComponent);
+            fix.detectChanges();
             grid = fix.componentInstance.grid;
             grid.filterMode = FilterMode.excelStyleFilter;
             fix.detectChanges();

src/app/grid-filtering/grid-filtering.sample.ts

@@ -534,7 +534,6 @@ export class GridFilteringComponent implements OnInit, AfterViewInit {
         const filterMode = this.filterModes[event.index].value as FilterMode;
         if (filterMode !== this.grid1.filterMode) {
             this.grid1.filterMode = filterMode;
-            this.grid1.reflow();
         }
     }
 
@@ -552,6 +551,5 @@ export class GridFilteringComponent implements OnInit, AfterViewInit {
 
     public onAllowFilteringChanged(event: IChangeCheckboxEventArgs) {
         this.grid1.allowFiltering = event.checked;
-        this.grid1.reflow();
     }
 }