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

Author: didimmova

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

@@ -966,7 +966,7 @@ describe('IgxDatePicker', () => {
                 },
                 element: {
                     nativeElement: jasmine.createSpyObj('mockElement',
-                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener'])
+                        ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener', 'querySelector'])
                 }
             } as any;
             mockInputDirective = {
@@ -1016,6 +1016,7 @@ describe('IgxDatePicker', () => {
             };
             datePicker = new IgxDatePickerComponent(elementRef, 'en-US', overlay, mockInjector, renderer2, null, mockCdr);
             (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/src/lib/date-picker/date-picker.component.ts

@@ -451,7 +451,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/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -1965,10 +1965,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/src/lib/date-range-picker/date-range-picker.component.ts

@@ -1223,10 +1223,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/src/lib/time-picker/time-picker.component.ts

@@ -426,6 +426,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 */
@@ -465,7 +469,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         outlet: this.outlet
     };
     private _defaultDropDownOverlaySettings: OverlaySettings = {
-        target: this.element.nativeElement,
         modal: false,
         closeOnOutsideClick: true,
         scrollStrategy: new AbsoluteScrollStrategy(),
@@ -771,6 +774,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
             : this.dialogOverlaySettings
             , settings);
 
+        if (this.isDropdown && this.inputGroupElement) {
+            overlaySettings.target = this.inputGroupElement;
+        }
+
         this.toggleRef.open(overlaySettings);
     }