fix(igxDropDown): fix toggle directive's onOpening call, closes #984

IgniteUI · May 15, 2018 · 2766561 · 2766561
1 parent 0e56f9d
commit 2766561
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/directives/toggle/toggle.directive.ts b/src/directives/toggle/toggle.directive.ts
@@ -71,14 +71,16 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         if (!this.collapsed) { return; }
 
         const player = this.animationActivation();
+        player.onStart(() => {
+            this.collapsed = false;
+        });
         player.onDone(() =>  {
             player.destroy();
             if (fireEvents) {
                 this.onOpened.emit();
             }
         });
 
-        this.collapsed = !this.collapsed;
         if (fireEvents) {
             this.onOpening.emit();
         }
@@ -89,10 +91,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         if (this.collapsed) { return; }
 
         const player = this.animationActivation();
-        player.onStart(() => {
-        });
         player.onDone(() => {
-            this.collapsed = !this.collapsed;
+            this.collapsed = true;
             // When using directive into component with OnPush it is necessary to
             // trigger change detection again when close animation ends
             // due to late updated @collapsed property.

diff --git a/src/drop-down/drop-down.component.html b/src/drop-down/drop-down.component.html
@@ -1,5 +1,5 @@
 <div class="igx-drop-down">
-    <div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening()" (onOpened)="onToggleOpened()" (onClosed)="onToggleClosed()">
+    <div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening()" (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing()" (onClosed)="onToggleClosed()">
         <ng-container *ngIf="!toggleDirective.collapsed">
             <ng-content></ng-content>
         </ng-container>

diff --git a/src/drop-down/drop-down.component.ts b/src/drop-down/drop-down.component.ts
@@ -282,6 +282,7 @@ export class IgxDropDownComponent implements IToggleView, OnInit {
     }
 
     onToggleOpening() {
+        this.toggleDirective.collapsed = false;
         this.cdr.detectChanges();
         this.scrollToItem(this.selectedItem);
         this.onOpening.emit();
@@ -301,6 +302,10 @@ export class IgxDropDownComponent implements IToggleView, OnInit {
         this.onOpened.emit();
     }
 
+    onToggleClosing() {
+        this.onClosing.emit();
+    }
+
     onToggleClosed() {
         if (this._focusedItem) {
             this._focusedItem.isFocused = false;