Merge pull request #7395 from IgniteUI/ibarakov/issue7350-9.0.x

Don't show default filter on custom filter columns

Author: DiyanDimitrov

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

@@ -2504,6 +2504,25 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(GridFunctions.getFilterCell(fix, 'ReleaseDate').query(By.css('.custom-filter'))).not.toBeNull(
                 '\`ReleaseDate\` customer filter tempalte was not found.');
         }));
+
+        it('Should close default filter template when clicking on a column with custom one.', fakeAsync(() => {
+            // Click on a column with default filter
+            GridFunctions.clickFilterCellChip(fix, 'Licensed');
+            fix.detectChanges();
+
+            // Verify filter row is visible
+            let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).not.toBeNull();
+
+            // Click on a column with custom filter
+            const header = GridFunctions.getColumnHeaderByIndex(fix, 1);
+            header.click();
+            fix.detectChanges();
+
+            // Expect the filter row is closed
+            filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).toBeNull('Default filter template was found on a column with custom filtering.');
+        }));
     });
 });
 

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -163,7 +163,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
     public onClick(event) {
         if (!this.colResizingService.isColumnResizing) {
             event.stopPropagation();
+
             if (this.grid.filteringService.isFilterRowVisible) {
+                if (this.column.filterCellTemplate) {
+                    this.grid.filteringRow.close();
+                    return;
+                }
+
                 if (this.column.filterable && !this.column.columnGroup &&
                     !this.grid.filteringService.isFilterComplex(this.column.field)) {
                     this.grid.filteringService.filteredColumn = this.column;

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1120,6 +1120,9 @@ export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
         <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
                     [filterable]="filterable" [resizable]="resizable" dataType="date" [filterCellTemplate]="filterTemplate">
         </igx-column>
+        <igx-column width="100px" field="Licensed" [filterable]="filterable"
+                    [resizable]="resizable" dataType="boolean">
+        </igx-column>
     </igx-grid>
     <ng-template #filterTemplate igxFilterCellTemplate let-column="column">
         <div class="custom-filter" style="flex-grow: 1;">