From 035df48dd67e021a35215e2f0fc6f1925f4659cb Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 20 Jan 2026 15:39:13 +0200 Subject: [PATCH 1/6] fix(date/timepicker)fix calendar dropdown positioning --- .../date-picker/src/date-picker/date-picker.component.ts | 2 +- .../time-picker/src/time-picker/time-picker.component.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts index 389683fcb44..b13f9a0beb2 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts @@ -462,7 +462,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 { diff --git a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts index 9ce0aa76dd4..28b2ad29172 100644 --- a/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.ts @@ -432,6 +432,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 */ @@ -472,7 +476,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); } From 5072c1f642eb544344c4cea4c8ec1ff33f6bad13 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 20 Jan 2026 16:08:14 +0200 Subject: [PATCH 2/6] test(datepicker): add InputGroup to mock --- .../date-picker/src/date-picker/date-picker.component.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts index 7e1d88dfaa4..7148d6561e7 100644 --- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts @@ -969,7 +969,7 @@ describe('IgxDatePicker', () => { }, element: { nativeElement: jasmine.createSpyObj('mockElement', - ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener']) + ['focus', 'blur', 'click', 'addEventListener', 'removeEventListener', 'querySelector']) } } as any; mockInputDirective = { @@ -1030,6 +1030,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; From cce6fa77bbb0e286ae81f1dc9a83a2a3ad9abc96 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 22 Jan 2026 10:46:14 +0200 Subject: [PATCH 3/6] fix(date-range-picker): fix calendar dropdown positioning --- .../date-range-picker/date-range-picker.component.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts index 86c2edd2951..62910580e69 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts @@ -1255,10 +1255,18 @@ 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; + + if (this.hasProjectedInputs) { + const bundle = this.projectedInputs.first?.nativeElement.querySelector('.igx-input-group__bundle'); + this._dropDownOverlaySettings.target = bundle || this.element.nativeElement; + } else { + const bundle = this.inputGroup?.element.nativeElement.querySelector('.igx-input-group__bundle'); + this._dropDownOverlaySettings.target = bundle || this.element.nativeElement; + } } private configOverlaySettings(): void { From cbf60efc8011fdf2af23d8a4d801439ec8c01137 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 22 Jan 2026 11:04:26 +0200 Subject: [PATCH 4/6] test(date-range-picker): update expected target --- .../src/date-range-picker/date-range-picker.component.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts index 594ee6a7a9b..ae6cd0cee55 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts +++ b/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); From 1a531217e393ecc935641be0656ae293b51070be Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 22 Jan 2026 14:25:34 +0200 Subject: [PATCH 5/6] fix(date-range-picker): fix target selector --- .../src/date-range-picker/date-range-picker.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts index 62910580e69..fd63d2656b3 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts @@ -1264,7 +1264,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective const bundle = this.projectedInputs.first?.nativeElement.querySelector('.igx-input-group__bundle'); this._dropDownOverlaySettings.target = bundle || this.element.nativeElement; } else { - const bundle = this.inputGroup?.element.nativeElement.querySelector('.igx-input-group__bundle'); + const bundle = this.element.nativeElement.querySelector('.igx-input-group__bundle'); this._dropDownOverlaySettings.target = bundle || this.element.nativeElement; } } From 97758b133573cf8dd78c5e18b37b0cd032d24a28 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 23 Jan 2026 10:06:53 +0200 Subject: [PATCH 6/6] chore(date-range): simplify conditional logic --- .../date-range-picker/date-range-picker.component.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts index fd63d2656b3..049d44ce91a 100644 --- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts @@ -1260,13 +1260,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective }; this._dropDownOverlaySettings.positionStrategy = new AutoPositionStrategy(this._positionSettings); - if (this.hasProjectedInputs) { - const bundle = this.projectedInputs.first?.nativeElement.querySelector('.igx-input-group__bundle'); - this._dropDownOverlaySettings.target = bundle || this.element.nativeElement; - } else { - const bundle = this.element.nativeElement.querySelector('.igx-input-group__bundle'); - this._dropDownOverlaySettings.target = bundle || 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 {