fix(filtering): reset expression to selected unary condition (#12807)

Author: RivaIvanova

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

@@ -68,14 +68,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     }
 
     public set value(val) {
-        if (!val && val !== 0) {
+        if (!val && val !== 0 && this.expression.searchVal) {
             this.expression.searchVal = null;
             const index = this.expressionsList.findIndex(item => item.expression === this.expression);
             if (index === 0 && this.expressionsList.length === 1) {
                 this.filteringService.clearFilter(this.column.field);
 
                 if (this.expression.condition.isUnary) {
-                    this.resetExpression();
+                    this.resetExpression(this.expression.condition.name);
                 }
 
                 return;
@@ -767,7 +767,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         this.showHideArrowButtons();
     }
 
-    private resetExpression() {
+    private resetExpression(condition?: string) {
         this.expression = {
             fieldName: this.column.field,
             condition: null,
@@ -776,7 +776,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         };
 
         if (this.column.dataType !== GridColumnDataType.Boolean) {
-            this.expression.condition = this.getCondition(this.conditions[0]);
+            this.expression.condition = this.getCondition(condition ?? this.conditions[0]);
         }
 
         if (this.column.dataType === GridColumnDataType.Date && this.input) {

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

@@ -2084,14 +2084,50 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             // iterate over unary conditions
             // empty
             GridFunctions.openFilterDDAndSelectCondition(fix, 6);
+            expect(grid.filteringRow.expression.condition.name).toEqual('empty');
 
-            grid.filteringRow.onClearClick();
+            const filterUIRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const reset = filterUIRow.queryAll(By.css('button'))[0];
+
+            reset.triggerEventHandler('click', null);
             tick(100);
             fix.detectChanges();
 
             expect(grid.filteringRow.expression.condition.name).toEqual('contains');
         }));
 
+        it('should reset expression to selected unary condition', fakeAsync(() => {
+            GridFunctions.clickFilterCellChip(fix, 'ReleaseDate');
+
+            const filterUIRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const datePicker = filterUIRow.query(By.directive(IgxDatePickerComponent));
+
+            // Equals condition
+            datePicker.triggerEventHandler('click', null);
+            tick();
+            fix.detectChanges();
+
+            const currentDay = document.querySelector('.igx-calendar__date--current');
+
+            currentDay.dispatchEvent(new Event('click'));
+            tick();
+            fix.detectChanges();
+
+            expect(grid.filteringRow.expression.condition.name).toEqual('equals');
+            expect(grid.rowList.length).toEqual(1);
+
+            // This Month condition
+            GridFunctions.openFilterDDAndSelectCondition(fix, 6);
+            tick();
+            fix.detectChanges();
+
+            expect(grid.filteringRow.expression.condition.name).toEqual('thisMonth');
+            expect(grid.rowList.length).toEqual(3);
+
+            const conditionChips = filterUIRow.queryAll(By.directive(IgxChipComponent));
+            expect(conditionChips.length).toBe(1);
+        }));
+
         it('Should filter by cells formatted data when using FormattedValuesFilteringStrategy', fakeAsync(() => {
             const formattedStrategy = new FormattedValuesFilteringStrategy(['Downloads']);
             grid.filterStrategy = formattedStrategy;