fix(dropdown): set display when inside a navbar and guarded by `ngI…

…f` (#4521) fix #4520
ng-bootstrap · Jun 6, 2023 · 05eafb2 · 05eafb2
1 parent d2a3063
commit 05eafb2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/dropdown/dropdown.spec.ts b/src/dropdown/dropdown.spec.ts
@@ -518,6 +518,35 @@ describe('ngb-dropdown-toggle', () => {
 			);
 		});
 
+		it(`shouldn't position the menu even if ngIf is applied`, () => {
+			const html = `
+      <nav class="navbar">
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav" *ngIf="true">
+            <li class="nav-item" ngbDropdown placement="bottom-right">
+              <a class="nav-link" ngbDropdownToggle role="button">Open</a>
+              <div ngbDropdownMenu>
+                <div class="dropdown-item">Item</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    `;
+
+			const fixture = createTestComponent(html);
+			const compiled = fixture.nativeElement;
+			const dropdown = fixture.debugElement.query(By.directive(NgbDropdown)).injector.get(NgbDropdown);
+			dropdown.open();
+			fixture.detectChanges();
+			const dropdownEl: HTMLElement = compiled.querySelector('[ngbdropdownmenu]');
+
+			expect(dropdownEl.getAttribute('style')).toBeNull(`The dropdown element shouldn't have calculated styles`);
+			expect(dropdownEl.getAttribute('data-popper-placement')).toBeNull(
+				`The dropdown element shouldn't have data-popper-placement set`,
+			);
+		});
+
 		it(`can override the defaut display value`, () => {
 			const html = `
       <nav class="navbar">

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -12,6 +12,7 @@ import {
 	NgZone,
 	OnChanges,
 	OnDestroy,
+	OnInit,
 	Output,
 	QueryList,
 	Renderer2,
@@ -162,7 +163,7 @@ export class NgbDropdownToggle extends NgbDropdownAnchor {
 	standalone: true,
 	host: { '[class.show]': 'isOpen()' },
 })
-export class NgbDropdown implements AfterContentInit, OnChanges, OnDestroy {
+export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestroy {
 	static ngAcceptInputType_autoClose: boolean | string;
 	static ngAcceptInputType_display: string;
 	private _destroyCloseHandlers$ = new Subject<void>();
@@ -258,7 +259,12 @@ export class NgbDropdown implements AfterContentInit, OnChanges, OnDestroy {
 		this.autoClose = config.autoClose;
 
 		this._positioning = ngbPositioning();
-		this.display = this._elementRef.nativeElement.closest('.navbar') ? 'static' : 'dynamic';
+	}
+
+	ngOnInit(): void {
+		if (!this.display) {
+			this.display = this._elementRef.nativeElement.closest('.navbar') ? 'static' : 'dynamic';
+		}
 	}
 
 	ngAfterContentInit() {