Merge pull request #6266 from IgniteUI/SKrastev/fix-6183-master

fix(chips): Fix chips displaying initial transition on the selection icon.

Author: ChronosSF

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

@@ -12,7 +12,7 @@
     (enter)="onChipDragEnterHandler($event)"
     (dropped)="onChipDrop($event)">
 
-    <div [ngClass]="selectClass(selected)" (transitionend)="onSelectTransitionDone($event)">
+    <div #selectContainer [ngClass]="selectClass(selected)">
         <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
     </div>
 

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

@@ -21,6 +21,8 @@ import {
     IDropDroppedEventArgs
 } from '../directives/drag-drop/drag-drop.directive';
 import { IBaseEventArgs } from '../core/utils';
+import { fromEvent } from 'rxjs';
+import { take, filter } from 'rxjs/operators';
 
 
 export interface IBaseChipEventArgs extends IBaseEventArgs {
@@ -376,6 +378,12 @@ export class IgxChipComponent extends DisplayDensityBase {
     @ViewChild('chipArea', { read: ElementRef, static: true })
     public chipArea: ElementRef;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('selectContainer', { read: ElementRef, static: true })
+    public selectContainer: ElementRef;
+
     /**
      * @hidden
      */
@@ -442,6 +450,10 @@ export class IgxChipComponent extends DisplayDensityBase {
             cancel: false
         };
 
+        fromEvent(this.selectContainer.nativeElement, 'transitionend')
+            .pipe(filter<TransitionEvent>(event => event.propertyName === 'width'), take(1))
+            .subscribe(event => this.onSelectTransitionDone(event));
+
         if (newValue && !this._selected) {
             onSelectArgs.selected = true;
             this.onSelection.emit(onSelectArgs);
@@ -463,7 +475,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     }
 
     public onSelectTransitionDone(event) {
-        if (event.propertyName === 'width' && !!event.target.tagName) {
+        if (!!event.target.tagName) {
             // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).
             this.onSelectionDone.emit({
                 owner: this,

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

@@ -423,7 +423,7 @@ describe('IgxChip', () => {
         });
 
         await wait(400);
-        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalledTimes(1);
         expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({
             originalEvent: null,
             owner: secondChipComp

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -430,13 +430,13 @@
     %igx-chip__select {
         display: inline-flex;
         align-items: center;
-        z-index: 1;
+        width: 18px;
         opacity: 1;
-        transition: opacity 120ms $ease-in-out-quad;
+        z-index: 1;
+        transition: opacity 120ms $ease-out-quad, width 120ms $ease-out-quad;
 
         > * {
-            width: 18px !important;
-            transition: width 120ms $ease-in-out-quad;
+            width: inherit !important;
         }
 
         + igx-prefix,
@@ -446,13 +446,10 @@
     }
 
     %igx-chip__select--hidden {
+        width: 0;
         opacity: 0;
         z-index: -1;
 
-        > * {
-            width: 0 !important;
-        }
-
         + igx-prefix,
         + [igxPrefix] {
             margin-#{$left}: 0;