Skip to content

Commit 94bc4b1

Browse files
ChronosSFChronosSF
authored
Merge pull request #5953 from IgniteUI/SKrastev/fix-5940-8.2.x
fix(igxChip): Fix onSelection.originalEvent not returning correct value.
2 parents bd57fe9 + 09f3cc1 commit 94bc4b1

File tree

8 files changed

+48
-34
lines changed

8 files changed

+48
-34
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ All notable changes for each version of this project will be documented in this
55
## 8.2.3
66
- `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.
77

8+
- `IgxChip`
9+
- **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.
10+
811
## 8.2.0
912
### New theme
1013
Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
(dragStart)="onChipDragStart($event)"
88
(dragEnd)="onChipDragEnd()"
99
(transitioned)="onChipMoveEnd($event)"
10-
(click)="onChipDragClicked($event)"
10+
(dragClick)="onChipDragClicked($event)"
1111
igxDrop
1212
(enter)="onChipDragEnterHandler($event)"
1313
(dropped)="onChipDrop($event)">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { IBaseEventArgs } from '../core/utils';
2424

2525

2626
export interface IBaseChipEventArgs extends IBaseEventArgs {
27-
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
27+
originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
2828
owner: IgxChipComponent;
2929
}
3030

@@ -557,7 +557,7 @@ export class IgxChipComponent extends DisplayDensityBase {
557557
// Start chip igxDrag behavior
558558
public onChipDragStart(event: IDragStartEventArgs) {
559559
this.onMoveStart.emit({
560-
originalEvent: event.originalEvent,
560+
originalEvent: event,
561561
owner: this
562562
});
563563
event.cancel = !this.draggable || this.disabled;
@@ -578,7 +578,7 @@ export class IgxChipComponent extends DisplayDensityBase {
578578
public onChipMoveEnd(event: IDragBaseEventArgs) {
579579
// moveEnd is triggered after return animation has finished. This happen when we drag and release the chip.
580580
this.onMoveEnd.emit({
581-
originalEvent: event.originalEvent,
581+
originalEvent: event,
582582
owner: this
583583
});
584584

@@ -592,14 +592,14 @@ export class IgxChipComponent extends DisplayDensityBase {
592592
*/
593593
public onChipDragClicked(event: IDragBaseEventArgs) {
594594
const clickEventArgs: IChipClickEventArgs = {
595-
originalEvent: event.originalEvent,
595+
originalEvent: event,
596596
owner: this,
597597
cancel: false
598598
};
599599
this.onClick.emit(clickEventArgs);
600600

601601
if (!clickEventArgs.cancel && this.selectable && !this.disabled) {
602-
this.changeSelection(!this.selected, event.originalEvent);
602+
this.changeSelection(!this.selected, event);
603603
}
604604
}
605605
// End chip igxDrag behavior

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,9 +415,19 @@ describe('IgxChip', () => {
415415
fix.detectChanges();
416416
expect(secondChipComp.onSelection.emit).toHaveBeenCalled();
417417
expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
418+
expect(secondChipComp.onSelection.emit).not.toHaveBeenCalledWith({
419+
originalEvent: null,
420+
owner: secondChipComp,
421+
cancel: false,
422+
selected: true
423+
});
418424

419425
await wait(400);
420426
expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
427+
expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({
428+
originalEvent: null,
429+
owner: secondChipComp
430+
});
421431
}));
422432

423433
it('should not fire onSelection event when selectable is false', () => {

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ import {
2121
IChipEnterDragAreaEventArgs,
2222
IBaseChipEventArgs
2323
} from './chip.component';
24-
import { IDropBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
24+
import { IDropBaseEventArgs, IDragBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
2525
import { takeUntil } from 'rxjs/operators';
2626
import { Subject } from 'rxjs';
2727

2828
export interface IBaseChipsAreaEventArgs {
29-
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
29+
originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
3030
owner: IgxChipsAreaComponent;
3131
}
3232

@@ -152,7 +152,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
152152

153153
private modifiedChipsArray: IgxChipComponent[];
154154
private _differ: IterableDiffer<IgxChipComponent> | null = null;
155-
private selectedChips: IgxChipComponent[] = [];
156155
protected destroy$ = new Subject<boolean>();
157156

158157
constructor(public cdr: ChangeDetectorRef, public element: ElementRef,
@@ -166,11 +165,11 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
166165
public ngAfterViewInit() {
167166
// If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet.
168167
if (this.chipsList.length) {
169-
this.selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
170-
if (this.selectedChips.length) {
168+
const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
169+
if (selectedChips.length) {
171170
this.onSelection.emit({
172171
originalEvent: null,
173-
newSelection: this.selectedChips,
172+
newSelection: selectedChips,
174173
owner: this
175174
});
176175
}
@@ -324,16 +323,17 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
324323
* @hidden
325324
*/
326325
protected onChipSelectionChange(event: IChipSelectEventArgs) {
327-
if (event.selected) {
328-
this.selectedChips.push(event.owner);
329-
} else if (!event.selected) {
330-
this.selectedChips = this.selectedChips.filter((chip) => {
326+
let selectedChips = this.chipsList.filter((chip) => chip.selected);
327+
if (event.selected && !selectedChips.includes(event.owner)) {
328+
selectedChips.push(event.owner);
329+
} else if (!event.selected && selectedChips.includes(event.owner)) {
330+
selectedChips = selectedChips.filter((chip) => {
331331
return chip.id !== event.owner.id;
332332
});
333333
}
334334
this.onSelection.emit({
335335
originalEvent: event.originalEvent,
336-
newSelection: this.selectedChips,
336+
newSelection: selectedChips,
337337
owner: this
338338
});
339339
}

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

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -386,7 +386,8 @@ describe('IgxChipsArea', () => {
386386
const firstChipComp = fix.componentInstance.chips.toArray()[1];
387387
spyOn(firstChipComp.onClick, 'emit');
388388

389-
firstChipComp.chipArea.nativeElement.click();
389+
firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1}));
390+
firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerup'));
390391

391392
fix.detectChanges();
392393
expect(firstChipComp.onClick.emit).toHaveBeenCalled();
@@ -857,26 +858,22 @@ describe('IgxChipsArea', () => {
857858

858859
const chipAreaComp = fix.componentInstance.chipsArea;
859860
const secondChipComp = fix.componentInstance.chips.toArray()[1];
861+
const pointerDownEvt = new PointerEvent('pointerdown', { pointerId: 1 });
862+
const pointerUpEvt = new PointerEvent('pointerup', { pointerId: 1 });
860863

861864
spyOn(chipAreaComp.onSelection, 'emit');
862865
fix.detectChanges();
863866

864-
secondChipComp.chipArea.nativeElement.click();
867+
secondChipComp.chipArea.nativeElement.dispatchEvent(pointerDownEvt);
865868
fix.detectChanges();
866-
867-
expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
868-
originalEvent: null,
869-
owner: chipAreaComp,
870-
newSelection: [secondChipComp]
871-
});
872-
873-
secondChipComp.chipArea.nativeElement.click();
869+
secondChipComp.chipArea.nativeElement.dispatchEvent(pointerUpEvt);
874870
fix.detectChanges();
875871

876-
expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
872+
expect(chipAreaComp.onSelection.emit).toHaveBeenCalled();
873+
expect(chipAreaComp.onSelection.emit).not.toHaveBeenCalledWith({
877874
originalEvent: null,
878875
owner: chipAreaComp,
879-
newSelection: []
876+
newSelection: [secondChipComp]
880877
});
881878
});
882879

@@ -889,8 +886,6 @@ describe('IgxChipsArea', () => {
889886
fix.detectChanges();
890887

891888
const secondChipComp = fix.componentInstance.chips.toArray();
892-
893-
expect(chipAreaComp['selectedChips']).toEqual([secondChipComp[0], secondChipComp[1]]);
894889
expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
895890
originalEvent: null,
896891
owner: chipAreaComp,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1043,7 +1043,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
10431043
}
10441044
} else {
10451045
// Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging.
1046-
this.dragClick.emit(eventArgs);
1046+
this.zone.run(() => {
1047+
this.dragClick.emit(eventArgs);
1048+
});
10471049
}
10481050
}
10491051

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1687,11 +1687,15 @@ describe('IgxGrid - GroupBy #grid', () => {
16871687
expect(chips[1].querySelectorAll(CHIP_REMOVE_ICON).length).toEqual(1);
16881688

16891689
// check click does not allow changing sort dir
1690-
chips[0].children[0].click();
1690+
chips[0].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
1691+
tick();
1692+
chips[0].children[0].dispatchEvent(new PointerEvent('pointerup'));
16911693
tick();
16921694
fix.detectChanges();
16931695

1694-
chips[1].children[0].click();
1696+
chips[1].children[0].dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
1697+
tick();
1698+
chips[1].children[0].dispatchEvent(new PointerEvent('pointerup'));
16951699
tick();
16961700

16971701
fix.detectChanges();

0 commit comments

Comments
 (0)