Merge pull request #5538 from IgniteUI/astaev/issue4967-8.1.x

fix(filtering): Refactor the grid filtering row #4967

Author: mpavlinov

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

@@ -87,9 +87,8 @@
             <ng-container *ngFor="let item of expressionsList; index as i; let last = last;" tabindex="0">
                 <igx-chip #chip id='chip'
                     (pointerdown)="onChipPointerdown($event, chip)"
-                    (click)="onChipClick($event, chip)"
-                    (onSelection)="onChipSelected($event, item.expression)"
-                    (keydown)="onChipKeyDown($event, chip)"
+                    (click)="onChipClick($event, item)"
+                    (keydown)="onChipKeyDown($event, item)"
                     (onRemove)="onChipRemoved($event, item)"
                     [selectable]="false"
                     [selected]="item.isSelected"

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

@@ -75,11 +75,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     }
 
     set column(val) {
+        if (this._column) {
+            this.expressionsList.forEach(exp => exp.isSelected = false);
+        }
         if (val) {
             this._column = val;
 
             this.expressionsList = this.filteringService.getExpressions(this._column.field);
-
             this.resetExpression();
 
             this.chipAreaScrollOffset = 0;
@@ -148,6 +150,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective;
         this._operatorsOverlaySettings.outlet = this.column.grid.outletDirective;
 
+        const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
+        if (selectedItem) {
+            this.expression = selectedItem.expression;
+        }
+
         this.input.nativeElement.focus();
     }
 
@@ -364,8 +371,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      * Commits the value of the input.
      */
     public commitInput() {
-        this.expressionsList.forEach(ex => ex.isSelected = false);
-        this.chipsArea.chipsList.forEach(chip => chip.selected = false);
+        const selectedItem = this.expressionsList.filter(ex => ex.isSelected === true);
+        selectedItem.forEach(e => e.isSelected = false);
 
         let indexToDeselect = -1;
         for (let index = 0; index < this.expressionsList.length; index++) {
@@ -435,8 +442,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         }
         requestAnimationFrame(() => {
             const focusedElement = document.activeElement;
-            if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement)) &&
-                this.dropDownConditions.collapsed) {
+            if (!(focusedElement && this.inputGroup.nativeElement.contains(focusedElement))
+                && this.dropDownConditions.collapsed) {
                 this.commitInput();
             }
         });
@@ -527,44 +534,37 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this._cancelChipClick = chip.selected && activeElement && this.inputGroup.nativeElement.contains(activeElement);
     }
 
-    public onChipClick(args, chip: IgxChipComponent) {
+    public onChipClick(args, item: ExpressionUI) {
         if (this._cancelChipClick) {
             return;
         }
 
         this._cancelChipClick = false;
-        chip.selected = !chip.selected;
+
+        this.expressionsList.forEach(ex => ex.isSelected = false);
+
+        this.toggleChip(item);
     }
 
-    /**
-     *  Event handler for chip selected event.
-     */
-    public onChipSelected(eventArgs: IChipSelectEventArgs, expression: IFilteringExpression) {
-        if (eventArgs.selected) {
-            if (this.chipsArea.chipsList) {
-                this.chipsArea.chipsList.forEach((chip) => {
-                    if (chip !== eventArgs.owner) {
-                        chip.selected = false;
-                    }
-                });
-            }
-            this.expression = expression;
+    public toggleChip(item: ExpressionUI) {
+        item.isSelected = !item.isSelected;
+        if (item.isSelected) {
+            this.expression = item.expression;
 
             if (this.input) {
                 this.input.nativeElement.focus();
             }
-        } else if (this.expression === expression) {
-            this.resetExpression();
         }
     }
 
     /**
      * Event handler for chip keydown event.
      */
-    public onChipKeyDown(eventArgs: KeyboardEvent, chip: IgxChipComponent) {
+    public onChipKeyDown(eventArgs: KeyboardEvent, item: ExpressionUI) {
         if (eventArgs.key === KEYS.ENTER) {
             eventArgs.preventDefault();
-            chip.selected = !chip.selected;
+
+            this.toggleChip(item);
         }
     }
 

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

@@ -1563,8 +1563,8 @@ describe('IgxGrid - Filtering actions', () => {
 
         reset.nativeElement.focus();
         inputGroup.nativeElement.dispatchEvent(new FocusEvent('focusout'));
+        await wait(100);
         fix.detectChanges();
-        await wait(16);
 
         expect(filterChip.componentInstance.selected).toBeFalsy();
     });
@@ -1594,19 +1594,22 @@ describe('IgxGrid - Filtering actions', () => {
         expect(filterChip).toBeTruthy();
         expect(filterChip.componentInstance.selected).toBeTruthy();
 
-        filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
+        // Click on the chip to commit it
+        clickElemAndBlur(filterChip, input);
+        await wait(200);
         fix.detectChanges();
-        await wait(16);
         expect(filterChip.componentInstance.selected).toBeFalsy();
 
-        filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
+        // Click on the chip to select it
+        GridFunctions.clickChip(filterChip);
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
         expect(filterChip.componentInstance.selected).toBeTruthy();
 
-        filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
+        // Click on the chip to commit it
+        clickElemAndBlur(filterChip, input);
+        await wait(100);
         fix.detectChanges();
-        await wait(16);
         expect(filterChip.componentInstance.selected).toBeFalsy();
     });
 
@@ -1624,34 +1627,35 @@ describe('IgxGrid - Filtering actions', () => {
         expect(filterChip).toBeTruthy();
         expect(filterChip.componentInstance.selected).toBeTruthy();
 
-         filterChip.nativeElement.dispatchEvent(new MouseEvent('click'));
+         // Click on the chip to commit it
+        clickElemAndBlur(filterChip, input);
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
         expect(filterChip.componentInstance.selected).toBeFalsy();
 
          filterValue = 'c';
         sendInput(input, filterValue, fix);
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
 
          let filterChips = filterUIRow.queryAll(By.directive(IgxChipComponent));
         expect(filterChips[1]).toBeTruthy();
         expect(filterChips[1].componentInstance.selected).toBeTruthy();
 
          GridFunctions.simulateKeyboardEvent(input, 'keydown', 'Enter');
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
         expect(filterChips[1].componentInstance.selected).toBeFalsy();
 
          let selectedColumn = GridFunctions.getColumnHeader('Downloads', fix);
         selectedColumn.nativeElement.dispatchEvent(new MouseEvent('click'));
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
 
          selectedColumn = GridFunctions.getColumnHeader('ProductName', fix);
         selectedColumn.nativeElement.dispatchEvent(new MouseEvent('click'));
         fix.detectChanges();
-        await wait(16);
+        await wait(100);
 
          filterChips = filterUIRow.queryAll(By.directive(IgxChipComponent));
         expect(filterChips[0].componentInstance.selected).toBeFalsy();
@@ -6080,3 +6084,13 @@ function verifyChipVisibility(fix, index: number, shouldBeFullyVisible: boolean)
     expect(chipRect.left >= visibleChipAreaRect.left && chipRect.right <= visibleChipAreaRect.right)
         .toBe(shouldBeFullyVisible, 'chip[' + index + '] visibility is incorrect');
 }
+
+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();
+    UIInteractions.simulatePointerEvent('pointerup', clickElem.nativeElement, elementRect.left, elementRect.top);
+    UIInteractions.simulateMouseEvent('click', clickElem.nativeElement, 10 , 10);
+}