fix(filtering): Refactor the grid filtering #4967

Author: astaev

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

@@ -87,9 +87,9 @@
             <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)"
+                    (onSelection)="onChipSelected($event)"
+                    (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

@@ -79,8 +79,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
             this._column = val;
 
             this.expressionsList = this.filteringService.getExpressions(this._column.field);
+            const selectedChip = this.expressionsList.find(ex => ex.isSelected);
 
+            if (selectedChip) {
+                this.expression = selectedChip.expression;
+            } else {
             this.resetExpression();
+            }
 
             this.chipAreaScrollOffset = 0;
             this.transform(this.chipAreaScrollOffset);
@@ -364,8 +369,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 selectedChip = this.expressionsList.filter(ex => ex.isSelected === true);
+        selectedChip.forEach(e => e.isSelected = false);
 
         let indexToDeselect = -1;
         for (let index = 0; index < this.expressionsList.length; index++) {
@@ -386,6 +391,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
      */
     public clearInput() {
         this.value = null;
+        const selectedChip = this.expressionsList.findIndex(ex => ex.isSelected === true);
+        this.expressionsList.splice(selectedChip, 1);
     }
 
     /**
@@ -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,53 @@ 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;
-    }
+        item.isSelected = !item.isSelected;
 
-    /**
-     *  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;
+        if (item.isSelected) {
+            if (this.expressionsList) {
+                this.expressionsList.forEach((expr) => {
+                    if (expr !== item) {
+                        expr.isSelected = false;
                     }
                 });
             }
-            this.expression = expression;
+            this.expression = item.expression;
 
             if (this.input) {
                 this.input.nativeElement.focus();
             }
-        } else if (this.expression === expression) {
+        } else if (this.expression === item.expression) {
             this.resetExpression();
         }
     }
 
+    /**
+     *  Event handler for chip selected event.
+     */
+    public onChipSelected(eventArgs: IChipSelectEventArgs) {
+        if (eventArgs.selected && this.input) {
+            this.input.nativeElement.focus();
+        }
+    }
+
     /**
      * 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;
+            item.isSelected = !item.isSelected;
+
+            this.expression = item.expression;
+            if (this.input) {
+                this.input.nativeElement.focus();
+            }
         }
     }