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
index a96dbb7b87..8663d147c2 100644
--- 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 @@
-
+
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
index 5ac4beb8fa..54d7a455d3 100644
--- 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
index 287c729815..b425a9370e 100644
--- 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;
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) => {
- 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) => {
+ 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
index 01704de4b1..f33dc437b9 100644
--- 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');