fix(grid): preselect custom conditions in Excel-style filtering (21.2.x)

CHANGELOG.md

@@ -21,6 +21,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxOverlayService`
     - **Deprecation** - The `outlet` property in `OverlaySettings`, `IgxOverlayOutletDirective`, and `igxToggleOutlet` input on `IgxToggleActionDirective` are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers.
 
+### Bug Fixes
+
+- `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`
+    - Excel-style filtering now preselects custom conditions in the filter dialog when no filter value has been entered yet.
+
 ## 21.1.3
 
 ### Security Fixes

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -189,6 +189,11 @@ export class IgxExcelStyleCustomDialogComponent {
     }
 
     private createCondition(conditionName: string) {
+        const condition = this.column.filters?.condition(conditionName);
+        if (condition) {
+            return condition;
+        }
+
         switch (this.column.dataType) {
             case GridColumnDataType.Boolean:
                 return IgxBooleanFilteringOperand.instance().condition(conditionName);

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

@@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group';
 import { INPUT_DEBOUNCE_TIME } from 'igniteui-angular/grids/core';
 import { IgxGridComponent } from './grid.component';
+import { IgxExcelStyleCustomDialogComponent } from '../../core/src/filtering/excel-style/excel-style-custom-dialog.component';
 import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec';
 import { IgxGridFilteringCellComponent } from 'igniteui-angular/grids/core';
 import { IgxGridHeaderComponent } from 'igniteui-angular/grids/core';
@@ -3719,6 +3720,57 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(GridFunctions.getExcelFilteringDDInput(fix, 1).value).toEqual('Less Than');
         }));
 
+        it('Should preselect custom string condition when opening the custom filter dialog.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+
+            expect(GridFunctions.getExcelFilteringDDInput(fix, 0).value).toEqual('custom');
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toEqual('');
+        }));
+
+        it('Should preselect custom number condition when opening the custom filter dialog.', fakeAsync(() => {
+            grid.getColumnByName('Downloads').filters = fix.componentInstance.customFilter;
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+
+            expect(GridFunctions.getExcelFilteringDDInput(fix, 0).value).toEqual('custom');
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toEqual('');
+        }));
+
+        it('Should use the default condition when it is not defined in the column filters.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'AnotherField');
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
+            tick(100);
+
+            const dialog = fix.debugElement.query(By.directive(IgxExcelStyleCustomDialogComponent))
+                .componentInstance as IgxExcelStyleCustomDialogComponent;
+            dialog.selectedOperator = 'contains';
+            dialog.onCustomDialogOpening();
+
+            const expression = dialog.expressionsList[0].expression;
+            expect(expression.condition).toBe(IgxStringFilteringOperand.instance().condition('contains'));
+            expect(expression.conditionName).toEqual('contains');
+        }));
+
         it('Should display friendly conditions\' names in custom filter dialog.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');