From a549a60390e253c6cf0f72758ed461a50c20767a Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 15:45:50 +0300 Subject: [PATCH 1/5] fix(igxChip): Fix onSelection.originalEvent not returning correct value. #5940 --- CHANGELOG.md | 4 ++++ .../src/lib/chips/chip.component.html | 2 +- .../src/lib/chips/chip.component.ts | 10 ++++---- .../src/lib/chips/chip.spec.ts | 10 ++++++++ .../src/lib/chips/chips-area.component.ts | 22 +++++++++--------- .../src/lib/chips/chips-area.spec.ts | 23 ++++++++----------- .../drag-drop/drag-drop.directive.ts | 4 +++- 7 files changed, 43 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 232dc500cb0..b762d6b0412 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes for each version of this project will be documented in this file. +## 8.2.3 +- `IgxChip` + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` now provide the events passed from the `igxDrag` directive, which are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. + ## 8.2.0 ### New theme Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system. diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html index 17b43bf0166..639a9e26d81 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.html +++ b/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)"> diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index 887ec6daf62..25584835772 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/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 diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index 365d60af69e..4f1e0977bac 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/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', () => { diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts index d7efddae3cd..b15fc34bb91 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts +++ b/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 | null = null; - private selectedChips: IgxChipComponent[] = []; protected destroy$ = new Subject(); 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 }); } diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts index 54529b6f8ec..13b8818d046 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts +++ b/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, diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index 0c54471268b..a670da82696 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/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); + }); } } From 16c01a1ac97a5b6bb8454b12ae9e2cfd20de37fa Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 16:02:17 +0300 Subject: [PATCH 2/5] chore(*): Small update to the changelog to include all events changed. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b762d6b0412..219558b6e30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ All notable changes for each version of this project will be documented in this ## 8.2.3 - `IgxChip` - - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` now provide the events passed from the `igxDrag` directive, which are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed ones are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc. ## 8.2.0 ### New theme From 1e687698c80821acaf4ac3b36f0cc6f4380b7f23 Mon Sep 17 00:00:00 2001 From: skrustev Date: Wed, 9 Oct 2019 17:56:59 +0300 Subject: [PATCH 3/5] chore(*): Update failing test. --- .../src/lib/grids/grid/grid.groupby.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index 055e4e79821..f27e0395978 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1689,11 +1689,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(); From 587edccd309125fb3ecbb046c543548d0962ca43 Mon Sep 17 00:00:00 2001 From: Pepo <3phase@users.noreply.github.com> Date: Thu, 10 Oct 2019 16:02:52 +0300 Subject: [PATCH 4/5] Removes unneeded full stop from changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7800ac0e2b0..88993dbc0a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ All notable changes for each version of this project will be documented in this - `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 provide 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.. + - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide 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 From 6c78b92ef303f266e5c5c19caa02376a5f87de9a Mon Sep 17 00:00:00 2001 From: Pepo <3phase@users.noreply.github.com> Date: Thu, 10 Oct 2019 16:09:30 +0300 Subject: [PATCH 5/5] Updates changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88993dbc0a1..4fae64cefcd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ All notable changes for each version of this project will be documented in this - `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 provide 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. + - **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