Merge pull request #5749 from IgniteUI/astaev/issue5627-8.1.x

fix(filtering): Make unary condition committable #5627

Author: DiyanDimitrov

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

@@ -50,7 +50,7 @@
         (onSelection)="onDateSelected($event)"
         (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
+            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
                 <igx-prefix #inputGroupPrefix
                             tabindex="0"
                             (click)="toggleConditionsDropDown(inputGroupPrefix)"
@@ -61,7 +61,7 @@
                 <input #input
                        igxInput
                        tabindex="0"
-                       (click)="expression.condition.isUnary ? noop() : openDialog(dropDownTarget.element.nativeElement)"
+                       (click)="expression.condition.isUnary ? noop() : openDialog(inputGroup.element.nativeElement)"
                        [placeholder]="placeholder"
                        autocomplete="off"
                        [value]="value | igxdate: filteringService.grid.locale"

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

@@ -10,7 +10,8 @@ import {
     ElementRef,
     HostBinding,
     HostListener,
-    ChangeDetectionStrategy
+    ChangeDetectionStrategy,
+    ViewRef
 } from '@angular/core';
 import { DataType } from '../../data-operations/data-util';
 import { IgxColumnComponent } from '../column.component';
@@ -437,11 +438,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      * Event handler for focusout on the input group.
      */
     public onInputGroupFocusout() {
-        if (!this.value && this.value !== 0) {
+        if (!this.value && this.value !== 0 &&
+            this.expression.condition && !this.expression.condition.isUnary) {
             return;
         }
         requestAnimationFrame(() => {
             const focusedElement = document.activeElement;
+            if (focusedElement.className === 'igx-chip__remove') {
+                return;
+            }
             if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement))
                 && this.dropDownConditions.collapsed) {
                 this.commitInput();
@@ -481,7 +486,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     /*
     * noop
     */
-    public noop() {}
+    public noop() { }
 
     /**
      *  Event handler for date picker's selection.
@@ -531,7 +536,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
 
     public onChipPointerdown(args, chip: IgxChipComponent) {
         const activeElement = document.activeElement;
-        this._cancelChipClick = chip.selected && activeElement && this.inputGroup.nativeElement.contains(activeElement);
+        this._cancelChipClick = chip.selected && activeElement &&
+            this.inputGroup.nativeElement.contains(activeElement);
     }
 
     public onChipClick(args, item: ExpressionUI) {
@@ -648,7 +654,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
                 this.showArrows = this.chipsAreaWidth >= containerWidth && this.isColumnFiltered;
 
                 // TODO: revise the cdr.detectChanges() usage here
-                this.cdr.detectChanges();
+                if (!(this.cdr as ViewRef).destroyed) {
+                this.cdr.detectChanges(); }
             }
         });
     }

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

@@ -1818,9 +1818,10 @@ describe('IgxGrid - Filtering Row UI actions', () => {
             dateCellChip.nativeElement.click();
             fix.detectChanges();
 
-            GridFunctions.filterBy('Today', '', fix);
+            GridFunctions.filterBy('Today', null, fix);
+            tick(100);
             expect(grid.rowList.length).toEqual(1);
-            GridFunctions.filterBy('Null', '', fix);
+            GridFunctions.filterBy('Null', null, fix);
             expect(grid.rowList.length).toEqual(0);
         }));
 
@@ -3386,8 +3387,38 @@ describe('IgxGrid - Filtering Row UI actions', () => {
             expect(fix.debugElement.query(By.css(FILTER_UI_ROW))).toBeNull();
             GridFunctions.verifyColumnIsHidden(prodNameCol, true , 5);
         }));
-    });
 
+        it('Unary conditions should be committable', fakeAsync (() => {
+            grid.height = '700px';
+            fix.detectChanges();
+
+            const prodNameCol = grid.columns.find((col) => col.field === 'ProductName');
+            GridFunctions.clickFilterCellChip(fix, 'ProductName');
+            fix.detectChanges();
+
+            // Check that the filterRow is opened
+            const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            GridFunctions.openFilterDD(fix.debugElement);
+            const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+            GridFunctions.selectFilteringCondition('Empty', dropdownList);
+            fix.detectChanges();
+            tick(16);
+
+            const chip = filterUIRow.query(By.directive(IgxChipComponent));
+            const input = filterUIRow.query(By.directive(IgxInputDirective));
+            expect(chip.componentInstance.selected).toBeTruthy();
+
+            clickElemAndBlur(chip, input);
+            fix.detectChanges();
+            tick(100);
+            expect(chip.componentInstance.selected).toBeFalsy();
+
+            GridFunctions.clickChip(chip);
+            fix.detectChanges();
+            tick(100);
+            expect(chip.componentInstance.selected).toBeTruthy();
+    }));
+});
     describe(null, () => {
         let fix, grid;
         beforeEach(fakeAsync(() => {
@@ -6293,8 +6324,8 @@ function clickElemAndBlur(clickElem, blurElem) {
     const elementRect = clickElem.nativeElement.getBoundingClientRect();
     UIInteractions.simulatePointerEvent('pointerdown', clickElem.nativeElement, elementRect.left, elementRect.top);
     blurElem.nativeElement.blur();
-    blurElem.nativeElement.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
     (clickElem as DebugElement).nativeElement.focus();
+    blurElem.nativeElement.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
     UIInteractions.simulatePointerEvent('pointerup', clickElem.nativeElement, elementRect.left, elementRect.top);
     UIInteractions.simulateMouseEvent('click', clickElem.nativeElement, 10 , 10);
 }

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

@@ -423,8 +423,10 @@ export class GridFunctions {
 
         const ddList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
         this.selectFilteringCondition(condition, ddList);
-
-       this.applyFilter(value, fix);
+        // fix.detectChanges();
+        tick(100);
+        this.applyFilter(value, fix);
+        tick(100);
     }
 
     public static typeValueInFilterRowInput(value: string, fix) {