feat(drp): align activeDate behavior with WC + tests

Author: ddaribo

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -715,7 +715,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                 this.selectMultiple(value);
                 break;
             case CalendarSelection.RANGE:
-                this.selectRange(value, true);
+                this.selectRange(value);
                 break;
         }
     }

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

@@ -343,6 +343,15 @@ describe('IgxDatePicker', () => {
                 const expectedDate = new Date(2025, 0, 2);
                 expect(datePicker.value).toEqual(expectedDate);
                 expect(datePicker.activeDate).toEqual(expectedDate);
+
+                const activeDescendantDate = new Date(expectedDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(expectedDate);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(expectedDate.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(expectedDate);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
+
             it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
                 const date = new Date(2025, 0, 1);
                 datePicker.value = date;

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

@@ -63,6 +63,7 @@ describe('IgxDateRangePicker', () => {
         let mockCalendar: IgxCalendarComponent;
         let mockDaysView: any;
         let mockAnimationService: AnimationService;
+        let mockCdr: any;
         const elementRef = { nativeElement: null };
         const platform = {} as any;
         const mockNgControl = jasmine.createSpyObj('NgControl',
@@ -88,6 +89,9 @@ describe('IgxDateRangePicker', () => {
             mockInjector = jasmine.createSpyObj('Injector', {
                 get: mockNgControl
             });
+            mockCdr = jasmine.createSpyObj('ChangeDetectorRef', {
+                detectChanges: () => { }
+            });
             mockAnimationBuilder = {
                 build: (a: AnimationMetadata | AnimationMetadata[]) => ({
                     create: (e: any, opt?: AnimationOptions) => ({
@@ -244,7 +248,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as dates are provided', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, overlay);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, mockCdr, overlay);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -260,7 +264,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, mockCdr, null, null);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -277,7 +281,7 @@ describe('IgxDateRangePicker', () => {
         }));
 
         it('should validate correctly when disabledDates are set', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, mockCdr, null, null);
             dateRange.ngOnInit();
 
             dateRange.registerOnChange(mockNgControl.registerOnChangeCb);
@@ -1317,6 +1321,60 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.opening.emit).toHaveBeenCalledTimes(0);
                     expect(dateRange.opened.emit).toHaveBeenCalledTimes(0);
                 }));
+
+                it('should update the calendar selection on typing', fakeAsync(() => {
+                    const range = { start: new Date(2025, 0, 16), end: new Date(2025, 0, 20) };
+                    dateRange.value = range;
+                    fixture.detectChanges();
+                    dateRange.open();
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(5);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('01/18/2025', startInput);
+
+                    tick(DEBOUNCE_TIME);
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(3);
+
+                    startDate = new Date(2025, 0, 18);
+                    const expectedRange = { start: startDate, end: new Date(2025, 0, 20) };
+                    expect(dateRange.value).toEqual(expectedRange);
+                    expect(dateRange.activeDate).toEqual(expectedRange.start);
+
+                    const activeDescendantDate = new Date(startDate.setHours(0, 0, 0, 0)).getTime().toString();
+                    expect(dateRange['_calendar'].activeDate).toEqual(startDate);
+                    expect(dateRange['_calendar'].viewDate.getMonth()).toEqual(startDate.getMonth());
+                    expect(dateRange['_calendar'].value[0]).toEqual(startDate);
+                    expect(dateRange['_calendar'].wrapper.nativeElement.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+                }));
+
+                it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
+                    const range = { start: new Date(2025, 0, 16), end: new Date(2025, 0, 20) };
+                    dateRange.value = range;
+                    fixture.detectChanges();
+                    dateRange.open();
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(5);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/18/2025', startInput);
+
+                    tick(DEBOUNCE_TIME);
+                    fixture.detectChanges();
+
+                    startDate = new Date(2025, 10, 18);
+
+                    const activeDescendantDate = new Date(startDate.setHours(0, 0, 0, 0)).getTime().toString();
+                    expect(dateRange['_calendar'].activeDate).toEqual(startDate);
+                    expect(dateRange['_calendar'].viewDate.getMonth()).toEqual(startDate.getMonth());
+                    expect(dateRange['_calendar'].wrapper.nativeElement.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+                }));
             });
 
             it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {
@@ -1739,13 +1797,70 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 expect(dateRange['_calendar'].disabledDates).toEqual(disabledDates);
+            }));
 
-                // should not allow to select a date from the disabled dates
-                startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 4);
-                endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 6);
+             it('should initialize activeDate with current date, when not set', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                const todayDate = new Date();
+                const today = new Date(todayDate.setHours(0, 0, 0, 0)).getTime().toString();
+
+                expect(dateRange.activeDate).toEqual(todayDate);
+
+                dateRange.open();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].activeDate).toEqual(todayDate);
+                expect(dateRange['_calendar'].value).toEqual([]);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(today);
+            }));
+
+            it('should initialize activeDate = first defined in value (start/end) when it is not set, but value is', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                let range = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 5) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(range.start);
+                dateRange.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(range.start.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(dateRange['_calendar'].activeDate).toEqual(range.start);
+                expect(dateRange['_calendar'].value[0]).toEqual(range.start);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+
+                range = { ...range, start: null};
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(range.end);
+            }));
+
+            it('should set activeDate correctly', fakeAsync(() => {
+                const targetDate = new Date(2025, 11, 1);
+                 fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                const range = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 5) };
+                dateRange.value = range;
+                dateRange.activeDate = targetDate;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(targetDate);
+                dateRange.open();
+                fixture.detectChanges();
 
-                selectDateRangeFromCalendar(startDate, endDate);
-                expect(dateRange.value).toBeNull();
+                const activeDescendantDate = new Date(targetDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(dateRange['_calendar'].activeDate).toEqual(targetDate);
+                expect(dateRange['_calendar'].value[0]).toEqual(range.start);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
             }));
 
             describe('Templated Calendar Header', () => {

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

@@ -387,6 +387,21 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             || DateTimeUtil.DEFAULT_INPUT_FORMAT;
     }
 
+    /**
+     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
+     * By default it is the current date, or the value of the picker, if set.
+    */
+    @Input()
+    public get activeDate(): Date {
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        const dateValue = DateTimeUtil.isValidDate(this._firstDefinedInRange) ? new Date(this._firstDefinedInRange.setHours(0, 0, 0, 0)) : null;
+        return this._activeDate ?? dateValue ?? this._calendar?.activeDate ?? today;
+    }
+
+    public set activeDate(value: Date) {
+        this._activeDate = value;
+    }
+
     /**
      * @example
      * ```html
@@ -499,6 +514,14 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return Object.assign({}, this._dialogOverlaySettings, this.overlaySettings);
     }
 
+    private get _firstDefinedInRange(): Date | null {
+        if (!this.value) {
+            return null;
+        }
+        const range = this.toRangeOfDates(this.value);
+        return range?.start ?? range?.end ?? null;
+    }
+
     private _resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN);
     private _doneButtonText = null;
     private _dateSeparator = null;
@@ -513,6 +536,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _displayMonthsCount = 2;
     private _specialDates: DateRangeDescriptor[] = null;
     private _disabledDates: DateRangeDescriptor[] = null;
+    private _activeDate: Date | null = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>, MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
             filter(x => x.id === this._overlayId),
@@ -810,6 +834,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         if (this.isDropdown && selectionData?.length > 1) {
             this.close();
         }
+        this._setCalendarActiveDate();
     }
 
     private handleClosing(e: IBaseCancelableBrowserEventArgs): void {
@@ -970,7 +995,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         } else if (range.length === 0 && this.calendar.monthViews) {
             this.calendar.deselectDate();
         }
-        this.calendar.viewDate = range[0] || new Date();
+        this._setCalendarActiveDate();
+        this._cdr.detectChanges();
     }
 
     private swapEditorDates(): void {
@@ -1031,6 +1057,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
                         } else {
                             this.value = { start: value, end: null };
                         }
+                        if (this.calendar) {
+                            this._setCalendarActiveDate(parseDate(value));
+                            this._cdr.detectChanges();
+                        }
                     });
                 end.dateTimeEditor.valueChange
                     .pipe(takeUntil(this._destroy$))
@@ -1040,6 +1070,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
                         } else {
                             this.value = { start: null, end: value as Date };
                         }
+                        if (this.calendar) {
+                            this._setCalendarActiveDate(parseDate(value));
+                            this._cdr.detectChanges();
+                        }
                     });
             }
         }
@@ -1157,6 +1191,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         this._setDisabledDates();
+        this._setCalendarActiveDate();
 
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
@@ -1196,4 +1231,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         }
         return false;
     }
+
+    private _setCalendarActiveDate(value = null): void {
+        if (this._calendar) {
+            this._calendar.activeDate = value ?? this.activeDate;
+            this._calendar.viewDate = value ?? this.activeDate;
+        }
+    }
 }