feat(IgxChip): Add new event when select animation is ended. Update the advanced filtering to use it instead. (#5822)

* feat(IgxChip): Add new event when select animation is ended. Update the advanced filtering to use it instead.

* chore(*): Remove running specific test.

* chore(*): Make private functions public and move test function to async function.

* chore(*): Change onSelectionEnd to onSelectionDone. FIx tests.

* fix(igxDrag): Fix onSelectionDone event triggered twice on IE and Edge. #5821

Author: skrustev

CHANGELOG.md

@@ -64,6 +64,8 @@ For more information about the theming please read our [documentation](https://w
     - introduced a new `readonly` property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
 - `IgxOverlay`
     - introduced a new `ContainerPositionStrategy`. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
+- `IgxChip`
+    - add `onSelectionDone` event that is triggered after all animations and transitions related to selection have ended.
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

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

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

@@ -281,12 +281,26 @@ export class IgxChipComponent extends DisplayDensityBase {
      * }
      * ```
      * ```html
-     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onSelection)="chipSelect($event)">
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelection)="chipSelect($event)">
      * ```
      */
     @Output()
     public onSelection = new EventEmitter<IChipSelectEventArgs>();
 
+    /**
+     * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.
+     * ```typescript
+     * chipSelectEnd(event: IBaseChipEventArgs){
+     *     let selectedChip = event.owner;
+     * }
+     * ```
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelectionDone)="chipSelectEnd($event)">
+     * ```
+     */
+    @Output()
+    public onSelectionDone = new EventEmitter<IBaseChipEventArgs>();
+
     /**
      * Emits an event when the `IgxChipComponent` keyboard navigation is being used.
      * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,
@@ -435,6 +449,16 @@ export class IgxChipComponent extends DisplayDensityBase {
         }
     }
 
+    public onSelectTransitionDone(event) {
+        if (event.propertyName === 'width' && !!event.target.tagName) {
+            // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).
+            this.onSelectionDone.emit({
+                owner: this,
+                originalEvent: event
+            });
+        }
+    }
+
     /**
      * @hidden
      */

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

@@ -13,7 +13,7 @@ import { IgxPrefixDirective } from './../directives/prefix/prefix.directive';
 import { IgxLabelDirective } from './../directives/label/label.directive';
 import { IgxSuffixDirective } from './../directives/suffix/suffix.directive';
 import { DisplayDensity } from '../core/displayDensity';
-import { UIInteractions} from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait} from '../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../test-utils/configure-suite';
 
 @Component({
@@ -398,13 +398,14 @@ describe('IgxChip', () => {
         });
     });
 
-    it('should fire onSelection event when selectable is true', () => {
+    it('should fire onSelection event when selectable is true', (async() => {
         const fix = TestBed.createComponent(TestChipComponent);
         fix.detectChanges();
 
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
         spyOn(secondChipComp.onSelection, 'emit');
+        spyOn(secondChipComp.onSelectionDone, 'emit');
         secondChipComp.chipArea.nativeElement.focus();
 
         const keyEvent = new KeyboardEvent('keydown', {
@@ -413,7 +414,11 @@ describe('IgxChip', () => {
         secondChipComp.chipArea.nativeElement.dispatchEvent(keyEvent);
         fix.detectChanges();
         expect(secondChipComp.onSelection.emit).toHaveBeenCalled();
-    });
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
+
+        await wait(400);
+        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+    }));
 
     it('should not fire onSelection event when selectable is false', () => {
         const fix = TestBed.createComponent(TestChipComponent);
@@ -422,6 +427,7 @@ describe('IgxChip', () => {
         const firstChipComp = fix.componentInstance.chips.toArray()[0];
 
         spyOn(firstChipComp.onSelection, 'emit');
+        spyOn(firstChipComp.onSelectionDone, 'emit');
         firstChipComp.elementRef.nativeElement.focus();
 
         const keyEvent = new KeyboardEvent('keydown', {
@@ -430,6 +436,7 @@ describe('IgxChip', () => {
         firstChipComp.elementRef.nativeElement.dispatchEvent(keyEvent);
         fix.detectChanges();
         expect(firstChipComp.onSelection.emit).toHaveBeenCalledTimes(0);
+        expect(firstChipComp.onSelectionDone.emit).toHaveBeenCalledTimes(0);
     });
 
     it('should not fire onSelection event when the remove button is clicked', () => {
@@ -439,6 +446,7 @@ describe('IgxChip', () => {
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
         spyOn(secondChipComp.onSelection, 'emit');
+        spyOn(secondChipComp.onSelectionDone, 'emit');
 
         const chipRemoveButton = secondChipComp.elementRef.nativeElement.querySelectorAll('.' + CHIP_REMOVE_BUTTON)[0];
         const removeBtnTop = chipRemoveButton.getBoundingClientRect().top;
@@ -450,5 +458,6 @@ describe('IgxChip', () => {
         fix.detectChanges();
 
         expect(secondChipComp.onSelection.emit).not.toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
     });
 });

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -94,6 +94,7 @@ <h6 class="igx-filter-empty__title">
                           (click)="onChipClick(expressionItem)"
                           (dblclick)="onChipDblClick(expressionItem)"
                           (onRemove)="onChipRemove(expressionItem)"
+                          (onSelectionDone)="onChipSelectionEnd()"
                     >
                     <span igxPrefix class="igx-filter-tree__expression-column">{{ expressionItem.expression.fieldName }}</span>
                     <igx-icon

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -538,15 +538,6 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
                     }
                 ];
             }
-
-            setTimeout(() => {
-                this.calculateContextMenuTarget();
-                if (this.contextMenuToggle.collapsed) {
-                    this.contextMenuToggle.open(this._overlaySettings);
-                } else {
-                    this.contextMenuToggle.reposition();
-                }
-            }, 200);
         } else {
             this.contextMenuToggle.close();
         }
@@ -832,4 +823,17 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         this.applyChanges();
         this.closeDialog();
     }
+
+    public onChipSelectionEnd() {
+        const contextualGroup = this.findSingleSelectedGroup();
+        if (contextualGroup || this.selectedExpressions.length > 1) {
+            this.contextualGroup = contextualGroup;
+            this.calculateContextMenuTarget();
+            if (this.contextMenuToggle.collapsed) {
+                this.contextMenuToggle.open(this._overlaySettings);
+            } else {
+                this.contextMenuToggle.reposition();
+            }
+        }
+    }
 }