Merge pull request #2491 from IgniteUI/mvenkov/reposition-outlet-in-perspective-container

Fix the position of content element, #2486

Author: bazal4o

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

@@ -717,6 +717,26 @@ describe('igxOverlay', () => {
             expect(contentDiv).toBeDefined();
             expect(contentDiv.classList.contains(CLASS_OVERLAY_CONTENT_MODAL)).toBeTruthy();
         }));
+
+        it('fix for #2486 - filtering dropdown is not correctly positioned', fakeAsync(() => {
+            const fix = TestBed.createComponent(WidthTestOverlayComponent);
+            fix.debugElement.nativeElement.style.transform = 'translatex(100px)';
+
+            fix.detectChanges();
+            tick();
+
+            fix.componentInstance.overlaySettings.outlet = fix.componentInstance.elementRef;
+
+            const buttonElement: HTMLElement = fix.componentInstance.buttonElement.nativeElement;
+            buttonElement.click();
+
+            fix.detectChanges();
+            tick();
+
+            const wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
+            expect(wrapper.getBoundingClientRect().left).toBe(100);
+            expect(fix.componentInstance.customComponent.nativeElement.getBoundingClientRect().left).toBe(400);
+        }));
     });
 
     describe('Integration tests: ', () => {
@@ -2560,20 +2580,22 @@ export class TwoButtonsComponent {
 })
 export class WidthTestOverlayComponent {
 
-    constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { }
+    constructor(
+        @Inject(IgxOverlayService) public overlay: IgxOverlayService,
+        public elementRef: ElementRef
+    ) { }
 
     @ViewChild('button') buttonElement: ElementRef;
     @ViewChild('myCustomComponent') customComponent: ElementRef;
+    public overlaySettings: OverlaySettings = {};
     click(event) {
-        const overlaySettings: OverlaySettings = {
-            positionStrategy: new ConnectedPositioningStrategy(),
-            scrollStrategy: new NoOpScrollStrategy(),
-            closeOnOutsideClick: true,
-            modal: false
-        };
+        this.overlaySettings.positionStrategy = new ConnectedPositioningStrategy();
+        this.overlaySettings.scrollStrategy = new NoOpScrollStrategy();
+        this.overlaySettings.closeOnOutsideClick = true;
+        this.overlaySettings.modal = false;
 
-        overlaySettings.positionStrategy.settings.target = this.buttonElement.nativeElement;
-        this.overlay.show(this.customComponent, overlaySettings);
+        this.overlaySettings.positionStrategy.settings.target = this.buttonElement.nativeElement;
+        this.overlay.show(this.customComponent, this.overlaySettings);
     }
 }
 

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

@@ -20,11 +20,10 @@ export class ConnectedPositioningStrategy implements IPositionStrategy {
 
   // we no longer use the element inside the position() as its dimensions are cached in rect
   position(contentElement: HTMLElement, size: { width: number, height: number}, document?: Document, initialCall?: boolean): void {
-    const eWidth = size.width;
-    const eHeight = size.height;
+    const startPoint = getPointFromPositionsSettings(this.settings, contentElement.parentElement);
 
-    contentElement.style.top = getPointFromPositionsSettings(this.settings).y + this.settings.verticalDirection * size.height + 'px';
-    contentElement.style.left = getPointFromPositionsSettings(this.settings).x + this.settings.horizontalDirection * size.width + 'px';
+    contentElement.style.top = startPoint.y + this.settings.verticalDirection * size.height + 'px';
+    contentElement.style.left = startPoint.x + this.settings.horizontalDirection * size.width + 'px';
   }
 }
 

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

@@ -48,7 +48,7 @@ export interface OverlayEventArgs {
 }
 
 /** @hidden */
-export function getPointFromPositionsSettings(settings: PositionSettings): Point {
+export function getPointFromPositionsSettings(settings: PositionSettings, overlayWrapper: HTMLElement): Point {
     let result: Point = new Point(0, 0);
 
     if (settings.target instanceof HTMLElement) {
@@ -59,6 +59,15 @@ export function getPointFromPositionsSettings(settings: PositionSettings): Point
         result = settings.target;
     }
 
+    //  if for some reason overlayWrapper is not at 0,0 position, e.g. overlay is in outlet
+    //  which is in element with transform,perspective or filter set, we should translate the result
+    //  accordingly
+    if (overlayWrapper) {
+        const overlayWrapperPosition = overlayWrapper.getBoundingClientRect();
+        result.x -= overlayWrapperPosition.left;
+        result.y -= overlayWrapperPosition.top;
+    }
+
     return result;
 }