diff --git a/CHANGELOG.md b/CHANGELOG.md index 163e3836296..4fae64cefcd 100644 --- a/CHANGELOG.md +++ b/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. 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); + }); } } 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 076e80c5eb3..2e9e61f86cf 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 @@ -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();