Merge pull request #15287 from IgniteUI/mvenkov/pass-toggle-target-to-toggle-19.0

Use provided in open method partial overlay settings - 19.0

Author: Lipata

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -478,6 +478,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         const eventArgs: IDialogCancellableEventArgs = { dialog: this, event: null, cancel: false };
         this.opening.emit(eventArgs);
         if (!eventArgs.cancel) {
+            overlaySettings = { ...{}, ... this._overlayDefaultSettings, ...overlaySettings };
             this.toggleRef.open(overlaySettings);
             this.isOpenChange.emit(true);
             if (!this.leftButtonLabel && !this.rightButtonLabel) {

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -256,7 +256,6 @@ describe('IgxDropDown ', () => {
                 expect(positionStrategy.settings.horizontalDirection).toBe(HorizontalAlignment.Right);
                 expect(positionStrategy.settings.verticalDirection).toBe(VerticalAlignment.Bottom);
             });
-
             it('should apply custom overlay settings if provided', () => {
                 const toggle: IgxToggleDirective = (dropdown as any).toggleDirective;
                 const customOverlaySettings: OverlaySettings = {
@@ -1266,6 +1265,31 @@ describe('IgxDropDown ', () => {
                 expect(dropdown.closing.emit).toHaveBeenCalledTimes(3);
                 expect(dropdown.closed.emit).toHaveBeenCalledTimes(3);
             }));
+            it('#15137 - should bind to custom target if provided', fakeAsync(() => {
+                const input = fixture.debugElement.query(By.css('input'));
+                dropdown.open({ target: input.nativeElement });
+                tick();
+                fixture.detectChanges();
+
+                const dropdownItems = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_ITEM}`));
+                expect(dropdownItems).not.toBeUndefined();
+
+                const inputRect = input.nativeElement.getBoundingClientRect();
+                let dropdownRect = dropdownItems[0].nativeElement.getBoundingClientRect();
+                expect(dropdownRect.left).toBe(inputRect.left);
+                expect(dropdownRect.top).toBe(inputRect.bottom);
+
+                dropdown.close();
+                tick();
+                fixture.detectChanges();
+                dropdown.open();
+                tick();
+                fixture.detectChanges();
+
+                dropdownRect = dropdownItems[0].nativeElement.getBoundingClientRect();
+                expect(dropdownRect.left).toBe(0);
+                expect(dropdownRect.top).toBe(0);
+            }));
         });
     });
 });
@@ -1341,7 +1365,6 @@ class DoubleIgxDropDownComponent implements OnInit {
         }
     }
 }
-
 @Component({
     template: `
     <input (click)="toggleDropDown()">

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -243,7 +243,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
      * ```
      */
     public open(overlaySettings?: OverlaySettings) {
-        const settings = overlaySettings || this.getDefaultOverlaySettings();
+        const settings = { ... {}, ...this.getDefaultOverlaySettings(), ...overlaySettings };
         this.toggleDirective.open(settings);
         this.updateScrollPosition();
     }