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');