Merge pull request #6510 from IgniteUI/mvenkov/fix-overlay-position-8.2.x

Position correctly overlay - 8.2.x

Author: kdinev

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -504,7 +504,7 @@ describe('igxOverlay', () => {
             expect(BaseFitPositionStrategy.prototype.position).toHaveBeenCalledTimes(3);
         });
 
-        it('fix for #1690 - click on second filter does not close first one.', fakeAsync(() => {
+        it('#1690 - click on second filter does not close first one.', fakeAsync(() => {
             const fixture = TestBed.createComponent(TwoButtonsComponent);
             const button1 = fixture.nativeElement.getElementsByClassName('buttonOne')[0];
             const button2 = fixture.nativeElement.getElementsByClassName('buttonTwo')[0];
@@ -521,7 +521,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children.length).toBe(1);
         }));
 
-        it('fix for #1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
+        it('#1692 - scroll strategy closes overlay when shown component is scrolled.', fakeAsync(() => {
             const fixture = TestBed.createComponent(SimpleDynamicWithDirectiveComponent);
             const overlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
             fixture.componentInstance.show(overlaySettings);
@@ -548,7 +548,7 @@ describe('igxOverlay', () => {
         }));
 
         // TODO: refactor utilities to include all exported methods in a class
-        it('fix for #1799 - content div should reposition on window resize.', fakeAsync(() => {
+        it('#1799 - content div should reposition on window resize.', fakeAsync(() => {
             const rect: ClientRect = {
                 bottom: 50,
                 height: 0,
@@ -590,7 +590,7 @@ describe('igxOverlay', () => {
             overlayInstance.hide(id);
         }));
 
-        it('fix for #2475 - An error is thrown for IgxOverlay when showing a component' +
+        it('#2475 - An error is thrown for IgxOverlay when showing a component' +
             'instance that is not attached to the DOM', fakeAsync(() => {
                 const fix = TestBed.createComponent(SimpleRefComponent);
                 fix.detectChanges();
@@ -611,7 +611,7 @@ describe('igxOverlay', () => {
                 expect(contentDiv.classList.contains(CLASS_OVERLAY_CONTENT_MODAL)).toBeTruthy();
             }));
 
-        it('fix for #2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
+        it('#2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
             const fix = TestBed.createComponent(WidthTestOverlayComponent);
             fix.debugElement.nativeElement.style.transform = 'translatex(100px)';
 
@@ -631,7 +631,7 @@ describe('igxOverlay', () => {
             expect(fix.componentInstance.customComponent.nativeElement.getBoundingClientRect().left).toBe(400);
         }));
 
-        it('fix for #2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
+        it('#2798 - Allow canceling of open and close of IgxDropDown through onOpening and onClosing events', fakeAsync(() => {
             const fix = TestBed.createComponent(SimpleRefComponent);
             fix.detectChanges();
             const overlayInstance = fix.componentInstance.overlay;
@@ -668,7 +668,7 @@ describe('igxOverlay', () => {
             expect(overlayInstance.onOpened.emit).toHaveBeenCalledTimes(1);
         }));
 
-        it('fix for #3673 - Should not close dropdown in dropdown', fakeAsync(() => {
+        it('#3673 - Should not close dropdown in dropdown', fakeAsync(() => {
             const fix = TestBed.createComponent(EmptyPageComponent);
             const button = fix.componentInstance.buttonElement;
             const overlay = fix.componentInstance.overlay;
@@ -704,7 +704,7 @@ describe('igxOverlay', () => {
             expect(overlayDiv.children[0].localName).toEqual('div');
         }));
 
-        it('fix for #3743 - Reposition correctly resized element.', () => {
+        it('#3743 - Reposition correctly resized element.', () => {
             const fixture = TestBed.createComponent(TopLeftOffsetComponent);
             fixture.detectChanges();
 
@@ -756,7 +756,7 @@ describe('igxOverlay', () => {
             document.body.removeChild(wrapperElement);
         });
 
-        it('Fix for #3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
+        it('#3988 - Should use ngModuleRef to create component', inject([ApplicationRef], (appRef: ApplicationRef) => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;
             fixture.detectChanges();
@@ -780,6 +780,46 @@ describe('igxOverlay', () => {
             expect(appRef.attachView).toHaveBeenCalledWith('test');
             expect(overlay.getOverlayById(id).componentRef as any).toBe(mockComponent);
         }));
+
+        it('#6474 - should calculate correctly position', () => {
+            const elastic: ElasticPositionStrategy = new ElasticPositionStrategy();
+            const targetRect: ClientRect = {
+                top: 100,
+                bottom: 200,
+                height: 100,
+                left: 100,
+                right: 200,
+                width: 100
+            };
+            const elementRect: ClientRect = {
+                top: 0,
+                bottom: 300,
+                height: 300,
+                left: 0,
+                right: 300,
+                width: 300
+            };
+            const viewPortRect: ClientRect = {
+                top: 1000,
+                bottom: 1300,
+                height: 300,
+                left: 1000,
+                right: 1300,
+                width: 300
+            };
+            spyOn<any>(elastic, 'setStyle').and.returnValue({});
+            spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect);
+            spyOn(Util, 'getTargetRect').and.returnValue(targetRect);
+
+            const element = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect'] );
+            spyOn(element, 'getBoundingClientRect').and.returnValue(elementRect);
+            element.classList = { add: () => {} };
+            element.style = { width: '', height: ''};
+            elastic.position(element, null, null, true);
+
+            expect(element.style.width).toBe('200px');
+            expect(element.style.height).toBe('100px');
+        });
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {
@@ -2532,7 +2572,7 @@ describe('igxOverlay', () => {
             tick();
         }));
 
-        // Test fix for #1883 #1820
+        // Test #1883 #1820
         it('It should close the component when esc key is pressed and there were other keys pressed prior to esc.', fakeAsync(() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             const overlay = fixture.componentInstance.overlay;

projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts

@@ -50,7 +50,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const leftBorder = this.calculateLeft(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection);
         const rightBorder = leftBorder + connectedFit.contentElementRect.width;
-        return connectedFit.viewPortRect.left < leftBorder && rightBorder < connectedFit.viewPortRect.right;
+        return 0 < leftBorder && rightBorder < connectedFit.viewPortRect.width;
     }
 
     /**
@@ -65,7 +65,7 @@ export class AutoPositionStrategy extends BaseFitPositionStrategy {
         const topBorder = this.calculateTop(
             connectedFit.targetRect, connectedFit.contentElementRect, flippedStartPoint, flippedDirection);
         const bottomBorder = topBorder + connectedFit.contentElementRect.height;
-        return connectedFit.viewPortRect.top < topBorder && bottomBorder < connectedFit.viewPortRect.bottom;
+        return 0 < topBorder && bottomBorder < connectedFit.viewPortRect.height;
     }
 
     /**

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -37,7 +37,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             this.settings.horizontalDirection);
         connectedFit.right = connectedFit.left + connectedFit.contentElementRect.width;
         connectedFit.fitHorizontal =
-            connectedFit.viewPortRect.left < connectedFit.left && connectedFit.right < connectedFit.viewPortRect.right;
+            0 < connectedFit.left && connectedFit.right < connectedFit.viewPortRect.width;
 
         connectedFit.top = this.calculateTop(
             connectedFit.targetRect,
@@ -46,7 +46,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             this.settings.verticalDirection);
         connectedFit.bottom = connectedFit.top + connectedFit.contentElementRect.height;
         connectedFit.fitVertical =
-            connectedFit.viewPortRect.top < connectedFit.top && connectedFit.bottom < connectedFit.viewPortRect.bottom;
+            0 < connectedFit.top && connectedFit.bottom < connectedFit.viewPortRect.height;
     }
 
     /**

projects/igniteui-angular/src/lib/services/overlay/position/elastic-position-strategy.ts

@@ -12,8 +12,8 @@ export class ElasticPositionStrategy extends BaseFitPositionStrategy {
         const transformString: string[] = [];
         if (!connectedFit.fitHorizontal) {
             const maxReduction = Math.max(0, connectedFit.contentElementRect.width - this.settings.minSize.width);
-            const leftExtend = Math.max(0, connectedFit.viewPortRect.left - connectedFit.left);
-            const rightExtend = Math.max(0, connectedFit.right - connectedFit.viewPortRect.right);
+            const leftExtend = Math.max(0, 0 - connectedFit.left);
+            const rightExtend = Math.max(0, connectedFit.right - connectedFit.viewPortRect.width);
             const reduction = Math.min(maxReduction, leftExtend + rightExtend);
             element.style.width = `${connectedFit.contentElementRect.width - reduction}px`;
 
@@ -33,8 +33,8 @@ export class ElasticPositionStrategy extends BaseFitPositionStrategy {
 
         if (!connectedFit.fitVertical) {
             const maxReduction = Math.max(0, connectedFit.contentElementRect.height - this.settings.minSize.height);
-            const topExtend = Math.max(0, connectedFit.viewPortRect.top - connectedFit.top);
-            const bottomExtend = Math.max(0, connectedFit.bottom - connectedFit.viewPortRect.bottom);
+            const topExtend = Math.max(0, 0 - connectedFit.top);
+            const bottomExtend = Math.max(0, connectedFit.bottom - connectedFit.viewPortRect.height);
             const reduction = Math.min(maxReduction, topExtend + bottomExtend);
             element.style.height = `${connectedFit.contentElementRect.height - reduction}px`;