fix(dropdown): fix isOpen [fixes #2310] (#2313)

valor-software · Jul 28, 2017 · a63f902 · a63f902
1 parent 8ac13f9
commit a63f902
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html b/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html
@@ -1,4 +1,4 @@
-<div class="btn-group" dropdown [isOpen]="status.isopen">
+<div class="btn-group" dropdown [isOpen]="status.isopen" (isOpenChange)="change($event)">
   <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>

diff --git a/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.ts b/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.ts
@@ -12,4 +12,8 @@ export class DemoDropdownTriggersManualComponent {
     $event.stopPropagation();
     this.status.isopen = !this.status.isopen;
   }
+
+  public change(value: boolean): void {
+    this.status.isopen = value;
+  }
 }
diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts
@@ -109,7 +109,9 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
   }
   // todo: move to component loader
   private _isInlineOpen = false;
-  private _showInline: boolean;
+  private get _showInline(): boolean {
+    return !this.container;
+  };
   private _inlinedMenu: EmbeddedViewRef<BsDropdownMenuDirective>;
 
   private _isDisabled: boolean;
@@ -143,8 +145,6 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     if (this._isInited) { return; }
     this._isInited = true;
 
-    this._showInline = !this.container;
-
     // attach DOM listeners
     this._dropdown.listen({
       triggers: this.triggers,
@@ -161,13 +161,6 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
       .filter((value: boolean) => value === true)
       .subscribe((value: boolean) => this.hide()));
 
-    // attach dropdown menu inside of dropdown
-    if (this._showInline) {
-      this._state.dropdownMenu
-        .then((dropdownMenu: BsComponentRef<BsDropdownMenuDirective>) => {
-          this._inlinedMenu = dropdownMenu.viewContainer.createEmbeddedView(dropdownMenu.templateRef);
-        });
-    }
   }
 
   /**
@@ -180,6 +173,13 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     }
 
     if (this._showInline) {
+      if (!this._inlinedMenu) {
+        this._state.dropdownMenu
+          .then((dropdownMenu: BsComponentRef<BsDropdownMenuDirective>) => {
+            this._inlinedMenu = dropdownMenu.viewContainer.createEmbeddedView(dropdownMenu.templateRef);
+          });
+      }
+
       this._isInlineOpen = true;
       this.onShown.emit(true);
       this._state.isOpenChange.emit(true);

diff --git a/src/spec/bs-dropdown.directive.spec.ts b/src/spec/bs-dropdown.directive.spec.ts
@@ -112,6 +112,7 @@ describe('Directive: Dropdown', () => {
     fixture.detectChanges();
     expect(element.querySelector('[dropdown]').classList).toContain('open');
     expect(context.isOpen).toBe(true);
+    tick();
     element.querySelector('li').click();
     fixture.detectChanges();
     expect(element.querySelector('[dropdown]').classList).not.toContain('open');
@@ -140,6 +141,7 @@ describe('Directive: Dropdown', () => {
     fixture.detectChanges();
     element.querySelector('button').click();
     fixture.detectChanges();
+    tick();
     expect(element.querySelector('[dropdown]').classList).toContain('open');
     element.querySelector('li').click();
     fixture.detectChanges();
@@ -203,6 +205,7 @@ describe('Directive: Dropdown', () => {
     element.querySelector('button').click();
     fixture.detectChanges();
     expect(element.querySelector('[dropdown]').classList).toContain('open');
+    tick();
     element.querySelector('li').click();
     fixture.detectChanges();
     expect(element.querySelector('[dropdown]').classList).toContain('open');