fix(dropdown): apply multiple positions correctly (#3058)

Fixes #3056
ng-bootstrap · Mar 28, 2019 · e9f7b9e · e9f7b9e
1 parent 5444d13
commit e9f7b9e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/src/dropdown/dropdown.spec.ts b/src/dropdown/dropdown.spec.ts
@@ -562,13 +562,38 @@ describe('ngb-dropdown-toggle', () => {
     const compiled = fixture.nativeElement;
     const dropdown = fixture.debugElement.query(By.directive(NgbDropdown)).injector.get(NgbDropdown);
     dropdown.open();
+    fixture.detectChanges();
     const dropdownElement = document.querySelector('div[ngbDropdownMenu]');
     const parentContainer = dropdownElement.parentNode;
     expect(parentContainer).toHaveCssClass('dropdown');
     expect(parentContainer.parentNode).toBe(document.body, 'The dropdown should be attached to the body');
 
   });
 
+  it(`should second placement if the first one doesn't fit`, () => {
+    const html = `
+      <div ngbDropdown placement="left right">
+          <button ngbDropdownToggle>
+            <span class="toggle">Toggle dropdown</span>
+          </button>
+          <div ngbDropdownMenu>
+            <a ngbDropdownItem>dropDown item</a>
+            <a ngbDropdownItem>dropDown item</a>
+        </div>
+      </div>`;
+
+    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 = compiled.querySelector('[ngbdropdownmenu]');
+    const targetElement = compiled.querySelector('button');
+    expect(Math.round(dropdownEl.getBoundingClientRect().left))
+        .toBe(Math.round(targetElement.getBoundingClientRect().right), 'Wrong dropdown placement');
+
+  });
+
   describe('Custom config', () => {
     let config: NgbDropdownConfig;
 

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -57,31 +57,7 @@ export class NgbDropdownMenu {
 
   @ContentChildren(NgbDropdownItem) menuItems: QueryList<NgbDropdownItem>;
 
-  constructor(
-      @Inject(forwardRef(() => NgbDropdown)) public dropdown, private _elementRef: ElementRef<HTMLElement>,
-      private _renderer: Renderer2) {}
-
-  getNativeElement() { return this._elementRef.nativeElement; }
-
-  position(triggerEl, placement) {
-    this.applyPlacement(positionElements(triggerEl, this._elementRef.nativeElement, placement));
-  }
-
-  applyPlacement(_placement: Placement) {
-    // remove the current placement classes
-    this._renderer.removeClass(this._elementRef.nativeElement.parentNode, 'dropup');
-    this._renderer.removeClass(this._elementRef.nativeElement.parentNode, 'dropdown');
-    this.placement = _placement;
-    /**
-     * apply the new placement
-     * in case of top use up-arrow or down-arrow otherwise
-     */
-    if (_placement.search('^top') !== -1) {
-      this._renderer.addClass(this._elementRef.nativeElement.parentNode, 'dropup');
-    } else {
-      this._renderer.addClass(this._elementRef.nativeElement.parentNode, 'dropdown');
-    }
-  }
+  constructor(@Inject(forwardRef(() => NgbDropdown)) public dropdown) {}
 }
 
 /**
@@ -227,7 +203,6 @@ export class NgbDropdown implements OnInit,
     if (!this._open) {
       this._open = true;
       this._applyContainer(this.container);
-      this._positionMenu();
       this.openChange.emit(true);
       this._setCloseHandlers();
     }
@@ -236,7 +211,7 @@ export class NgbDropdown implements OnInit,
   private _setCloseHandlers() {
     ngbAutoClose(
         this._ngZone, this._document, this.autoClose, () => this.close(), this._closed$,
-        this._menu ? [this._menu.getNativeElement()] : [], this._anchor ? [this._anchor.getNativeElement()] : []);
+        this._menu ? [this._menuElement.nativeElement] : [], this._anchor ? [this._anchor.getNativeElement()] : []);
   }
 
   /**
@@ -373,7 +348,7 @@ export class NgbDropdown implements OnInit,
   private _applyPlacementClasses(placement?: Placement) {
     if (this._menu) {
       if (!placement) {
-        placement = Array.isArray(this.placement) ? this.placement[0] : this.placement as Placement;
+        placement = Array.isArray(this.placement) ? this.placement[0] : this.placement.split(' ')[0] as Placement;
       }
 
       const renderer = this._renderer;
@@ -382,7 +357,6 @@ export class NgbDropdown implements OnInit,
       // remove the current placement classes
       renderer.removeClass(dropdownElement, 'dropup');
       renderer.removeClass(dropdownElement, 'dropdown');
-      this.placement = placement;
       this._menu.placement = placement;
 
       /*