fix(igxChip): Fix onSelection.originalEvent not returning correct value.

CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes for each version of this project will be documented in this
 ## 8.2.3
 - `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs.
 
+- `IgxChip`
+    - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provides the events, passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached.
+
 ## 8.2.0
 ### New theme
 Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -7,7 +7,7 @@
     (dragStart)="onChipDragStart($event)"
     (dragEnd)="onChipDragEnd()"
     (transitioned)="onChipMoveEnd($event)"
-    (click)="onChipDragClicked($event)"
+    (dragClick)="onChipDragClicked($event)"
     igxDrop
     (enter)="onChipDragEnterHandler($event)"
     (dropped)="onChipDrop($event)">

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -24,7 +24,7 @@ import { IBaseEventArgs } from '../core/utils';
 
 
 export interface IBaseChipEventArgs extends IBaseEventArgs {
-    originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
+    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipComponent;
 }
 
@@ -557,7 +557,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     // Start chip igxDrag behavior
     public onChipDragStart(event: IDragStartEventArgs) {
         this.onMoveStart.emit({
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this
         });
         event.cancel = !this.draggable || this.disabled;
@@ -578,7 +578,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     public onChipMoveEnd(event: IDragBaseEventArgs) {
         // moveEnd is triggered after return animation has finished. This happen when we drag and release the chip.
         this.onMoveEnd.emit({
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this
         });
 
@@ -592,14 +592,14 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     public onChipDragClicked(event: IDragBaseEventArgs) {
         const clickEventArgs: IChipClickEventArgs = {
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this,
             cancel: false
         };
         this.onClick.emit(clickEventArgs);
 
         if (!clickEventArgs.cancel && this.selectable && !this.disabled) {
-            this.changeSelection(!this.selected, event.originalEvent);
+            this.changeSelection(!this.selected, event);
         }
     }
     // End chip igxDrag behavior

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -415,9 +415,19 @@ describe('IgxChip', () => {
         fix.detectChanges();
         expect(secondChipComp.onSelection.emit).toHaveBeenCalled();
         expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
+        expect(secondChipComp.onSelection.emit).not.toHaveBeenCalledWith({
+            originalEvent: null,
+            owner: secondChipComp,
+            cancel: false,
+            selected: true
+        });
 
         await wait(400);
         expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({
+            originalEvent: null,
+            owner: secondChipComp
+        });
     }));
 
     it('should not fire onSelection event when selectable is false', () => {

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -21,12 +21,12 @@ import {
     IChipEnterDragAreaEventArgs,
     IBaseChipEventArgs
 } from './chip.component';
-import { IDropBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
+import { IDropBaseEventArgs, IDragBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 export interface IBaseChipsAreaEventArgs {
-    originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
+    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipsAreaComponent;
 }
 
@@ -152,7 +152,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
 
     private modifiedChipsArray: IgxChipComponent[];
     private _differ: IterableDiffer<IgxChipComponent> | null = null;
-    private selectedChips: IgxChipComponent[] = [];
     protected destroy$ = new Subject<boolean>();
 
     constructor(public cdr: ChangeDetectorRef, public element: ElementRef,
@@ -166,11 +165,11 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
     public ngAfterViewInit() {
         // If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet.
         if (this.chipsList.length) {
-            this.selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
-            if (this.selectedChips.length) {
+            const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
+            if (selectedChips.length) {
                 this.onSelection.emit({
                     originalEvent: null,
-                    newSelection: this.selectedChips,
+                    newSelection: selectedChips,
                     owner: this
                 });
             }
@@ -324,16 +323,17 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      * @hidden
      */
     protected onChipSelectionChange(event: IChipSelectEventArgs) {
-        if (event.selected) {
-            this.selectedChips.push(event.owner);
-        } else if (!event.selected) {
-            this.selectedChips = this.selectedChips.filter((chip) => {
+        let selectedChips = this.chipsList.filter((chip) => chip.selected);
+        if (event.selected && !selectedChips.includes(event.owner)) {
+            selectedChips.push(event.owner);
+        } else if (!event.selected && selectedChips.includes(event.owner)) {
+            selectedChips = selectedChips.filter((chip) => {
                 return chip.id !== event.owner.id;
             });
         }
         this.onSelection.emit({
             originalEvent: event.originalEvent,
-            newSelection: this.selectedChips,
+            newSelection: selectedChips,
             owner: this
         });
     }

projects/igniteui-angular/src/lib/chips/chips-area.spec.ts

@@ -386,7 +386,8 @@ describe('IgxChipsArea', () => {
         const firstChipComp = fix.componentInstance.chips.toArray()[1];
         spyOn(firstChipComp.onClick, 'emit');
 
-        firstChipComp.chipArea.nativeElement.click();
+        firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1}));
+        firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerup'));
 
         fix.detectChanges();
         expect(firstChipComp.onClick.emit).toHaveBeenCalled();
@@ -857,26 +858,22 @@ describe('IgxChipsArea', () => {
 
         const chipAreaComp = fix.componentInstance.chipsArea;
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
+        const pointerDownEvt = new PointerEvent('pointerdown', { pointerId: 1 });
+        const pointerUpEvt = new PointerEvent('pointerup', { pointerId: 1 });
 
         spyOn(chipAreaComp.onSelection, 'emit');
         fix.detectChanges();
 
-        secondChipComp.chipArea.nativeElement.click();
+        secondChipComp.chipArea.nativeElement.dispatchEvent(pointerDownEvt);
         fix.detectChanges();
-
-        expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
-            originalEvent: null,
-            owner: chipAreaComp,
-            newSelection: [secondChipComp]
-        });
-
-        secondChipComp.chipArea.nativeElement.click();
+        secondChipComp.chipArea.nativeElement.dispatchEvent(pointerUpEvt);
         fix.detectChanges();
 
-        expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
+        expect(chipAreaComp.onSelection.emit).toHaveBeenCalled();
+        expect(chipAreaComp.onSelection.emit).not.toHaveBeenCalledWith({
             originalEvent: null,
             owner: chipAreaComp,
-            newSelection: []
+            newSelection: [secondChipComp]
         });
     });
 
@@ -889,8 +886,6 @@ describe('IgxChipsArea', () => {
         fix.detectChanges();
 
         const secondChipComp = fix.componentInstance.chips.toArray();
-
-        expect(chipAreaComp['selectedChips']).toEqual([secondChipComp[0], secondChipComp[1]]);
         expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
             originalEvent: null,
             owner: chipAreaComp,

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -1043,7 +1043,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             }
         } else {
             // Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging.
-            this.dragClick.emit(eventArgs);
+            this.zone.run(() => {
+                this.dragClick.emit(eventArgs);
+            });
         }
     }
 

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

@@ -1687,11 +1687,15 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(chips[1].querySelectorAll(CHIP_REMOVE_ICON).length).toEqual(1);
 
         // check click does not allow changing sort dir
-        chips[0].children[0].click();
+        chips[0].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
+        tick();
+        chips[0].children[0].dispatchEvent(new PointerEvent('pointerup'));
         tick();
         fix.detectChanges();
 
-        chips[1].children[0].click();
+        chips[1].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
+        tick();
+        chips[1].children[0].dispatchEvent(new PointerEvent('pointerup'));
         tick();
 
         fix.detectChanges();