Fix issue with chip click events.

Author: MKirova

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

@@ -17,7 +17,7 @@
                 (dragLeave)="onDimDragLeave($event)"
                 (dragDrop)="onDimDrop($event, filterArea, 2)"
                 >
-                    <igx-icon igxPrefix (pointerdown)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
+                    <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
                     {{filter.fieldName}}
                 </igx-chip>
             </igx-chips-area>
@@ -42,7 +42,7 @@
              (dragDrop)="onDimDrop($event, colArea, 1)"
              >
                 <igx-icon igxPrefix>view_column</igx-icon>
-                <igx-icon (pointerdown)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
+                <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
                 {{col.fieldName}}
             </igx-chip>
         </igx-chips-area>
@@ -93,7 +93,7 @@
                      (dragDrop)="onDimDrop($event, rowArea, 0)"
                      >
                         <igx-icon igxPrefix>table_rows</igx-icon>
-                        <igx-icon igxPrefix (pointerdown)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
+                        <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
                         {{ row.fieldName}}
                     </igx-chip>
                 </igx-chips-area>

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

@@ -72,24 +72,25 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         filter.enabled = false;
     }
 
+    public onFilteringIconPointerDown(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
     public onFilteringIconClick(event, dimension) {
         event.stopPropagation();
         event.preventDefault();
-        // we are bound on pointerdown but excel filter listens on document click and closes :(
-        setTimeout(() => {
-            let dim = dimension;
-            let col;
-            while(dim) {
-                col = this.grid.originalDataColumns.find(x => x.field === dim.fieldName || x.field === dim.member);
-                if (col) {
-                    break;
-                } else {
-                    dim = dimension.childLevels[0];
-                }
+        let dim = dimension;
+        let col;
+        while(dim) {
+            col = this.grid.originalDataColumns.find(x => x.field === dim.fieldName || x.field === dim.member);
+            if (col) {
+                break;
+            } else {
+                dim = dimension.childLevels[0];
             }
-            this.grid.filteringService.toggleFilterDropdown(event.target, col);
-        }, 100);
-
+        }
+        this.grid.filteringService.toggleFilterDropdown(event.target, col);
     }
 
     public onDimDragEnter(event, dimension: PivotDimensionType) {