fix(date/date-range/timepicker): fix calendar dropdown positioning (#16800)

Author: didimmova

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts

@@ -967,7 +967,7 @@ describe('IgxDatePicker', () => {
                 },
                 element: {
                     nativeElement: jasmine.createSpyObj('mockElement',
-                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener'])
+                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener', 'querySelector'])
                 }
             } as any;
             mockInputDirective = {
@@ -1029,6 +1029,7 @@ describe('IgxDatePicker', () => {
 
             datePicker = TestBed.inject(IgxDatePickerComponent);
             (datePicker as any).inputGroup = mockInputGroup;
+            (mockInputGroup.element.nativeElement.querySelector as jasmine.Spy).and.returnValue(mockInputGroup.element.nativeElement);
             (datePicker as any).inputDirective = mockInputDirective;
             (datePicker as any).dateTimeEditor = mockDateEditor;
             (datePicker as any).viewContainerRef = viewsContainerRef;

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts

@@ -460,7 +460,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private get inputGroupElement(): HTMLElement {
-        return this.inputGroup?.element.nativeElement;
+        return this.inputGroup?.element.nativeElement.querySelector('.igx-input-group__bundle');
     }
 
     private get dateValue(): Date {

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts

@@ -1922,10 +1922,11 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 const overlayContent = document.getElementsByClassName(CSS_CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
+                const expectedTarget = dateRange.element.nativeElement.querySelector('.igx-input-group__bundle');
                 expect(AutoPositionStrategy.prototype.position).toHaveBeenCalledTimes(1);
                 expect(AutoPositionStrategy.prototype.position)
                     .toHaveBeenCalledWith(overlayContent, jasmine.anything(), document,
-                        jasmine.anything(), dateRange.element.nativeElement);
+                        jasmine.anything(), expectedTarget);
             }));
             it('Should the weekStart property takes precedence over locale.', fakeAsync(() => {
                 fixture = TestBed.createComponent(DateRangeCustomComponent);

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -1239,10 +1239,15 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private configPositionStrategy(): void {
         this._positionSettings = {
             openAnimation: fadeIn,
-            closeAnimation: fadeOut
+            closeAnimation: fadeOut,
+            offset: 1
         };
         this._dropDownOverlaySettings.positionStrategy = new AutoPositionStrategy(this._positionSettings);
-        this._dropDownOverlaySettings.target = this.element.nativeElement;
+
+        const bundle = this.hasProjectedInputs
+            ? this.projectedInputs.first?.nativeElement.querySelector('.igx-input-group__bundle')
+            : this.element.nativeElement.querySelector('.igx-input-group__bundle');
+        this._dropDownOverlaySettings.target = bundle || this.element.nativeElement;
     }
 
     private configOverlaySettings(): void {

projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts

@@ -420,6 +420,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         return Object.assign({}, this._defaultDropDownOverlaySettings, this.overlaySettings);
     }
 
+    private get inputGroupElement(): HTMLElement {
+        return this.inputGroup?.element.nativeElement.querySelector('.igx-input-group__bundle');
+    }
+
     /** @hidden @internal */
     public displayValue: PipeTransform = { transform: (date: Date) => this.formatter(date) };
     /** @hidden @internal */
@@ -459,7 +463,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         outlet: this.outlet
     };
     private _defaultDropDownOverlaySettings: OverlaySettings = {
-        target: this.element.nativeElement,
         modal: false,
         closeOnOutsideClick: true,
         scrollStrategy: new AbsoluteScrollStrategy(),
@@ -758,6 +761,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
             : this.dialogOverlaySettings
             , settings);
 
+        if (this.isDropdown && this.inputGroupElement) {
+            overlaySettings.target = this.inputGroupElement;
+        }
+
         this.toggleRef.open(overlaySettings);
     }