fix(position): wrong placement class applies in some cases (#3042)

Fixes #3040
ng-bootstrap · Feb 27, 2019 · 5fdc3fa · 5fdc3fa
1 parent 49d48c6
commit 5fdc3fa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/src/popover/popover.spec.ts b/src/popover/popover.spec.ts
@@ -108,7 +108,7 @@ describe('ngb-popover', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('popover');
-      expect(windowEl).toHaveCssClass(`bs-popover-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-popover-top');
       expect(windowEl.textContent.trim()).toBe('TitleHello, World!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-popover-1');
@@ -133,7 +133,7 @@ describe('ngb-popover', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('popover');
-      expect(windowEl).toHaveCssClass(`bs-popover-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-popover-top');
       expect(windowEl.textContent.trim()).toBe('TitleHello, John!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-popover-2');
@@ -384,8 +384,8 @@ describe('ngb-popover', () => {
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
 
-    it('should accept placement in array(second value of the array should be applied)', () => {
-      const fixture = createTestComponent(`<div ngbPopover="Great tip!" [placement]="['left-top','top-right']"></div>`);
+    it('should accept placement in array (second value of the array should be applied)', () => {
+      const fixture = createTestComponent(`<div ngbPopover="Great tip!" [placement]="['left-top','top-left']"></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbPopover));
 
       directive.triggerEventHandler('click', {});
@@ -394,7 +394,7 @@ describe('ngb-popover', () => {
 
       expect(windowEl).toHaveCssClass('popover');
       expect(windowEl).toHaveCssClass('bs-popover-top');
-      expect(windowEl).toHaveCssClass('bs-popover-top-right');
+      expect(windowEl).toHaveCssClass('bs-popover-top-left');
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
 

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
@@ -66,7 +66,7 @@ describe('ngb-tooltip', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('tooltip');
-      expect(windowEl).toHaveCssClass(`bs-tooltip-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-tooltip-top');
       expect(windowEl.textContent.trim()).toBe('Great tip!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-tooltip-0');
@@ -270,9 +270,9 @@ describe('ngb-tooltip', () => {
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
 
-      it('should accept placement in array(second value of the array should be applied)', () => {
+      it('should accept placement in array (second value of the array should be applied)', () => {
         const fixture =
-            createTestComponent(`<div ngbTooltip="Great tip!" [placement]="['left-top','top-right']"></div>`);
+            createTestComponent(`<div ngbTooltip="Great tip!" [placement]="['left-top','top-left']"></div>`);
         const directive = fixture.debugElement.query(By.directive(NgbTooltip));
 
         directive.triggerEventHandler('mouseenter', {});
@@ -281,7 +281,7 @@ describe('ngb-tooltip', () => {
 
         expect(windowEl).toHaveCssClass('tooltip');
         expect(windowEl).toHaveCssClass('bs-tooltip-top');
-        expect(windowEl).toHaveCssClass('bs-tooltip-top-right');
+        expect(windowEl).toHaveCssClass('bs-tooltip-top-left');
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
 

diff --git a/src/util/positioning.ts b/src/util/positioning.ts
@@ -221,7 +221,6 @@ export function positionElements(
   // The translate3d/gpu acceleration render a blurry text on chrome, the next line is commented until a browser fix
   // style['will-change'] = 'transform';
 
-  const lastPlacement = placementVals[placementVals.length - 1];
   let testPlacement: Placement;
   let isInViewport = false;
   for (testPlacement of placementVals) {
@@ -232,8 +231,8 @@ export function positionElements(
       break;
     }
 
-    // Remove the baseClasses for further calculation, except for the last one
-    if (baseClass && testPlacement !== lastPlacement) {
+    // Remove the baseClasses for further calculation
+    if (baseClass) {
       addedClasses.forEach((classname) => { classList.remove(classname); });
     }
   }