feat(date-picker): Set calendar activeDate on user input (#1819)

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: ddaribo

src/components/date-picker/date-picker.spec.ts

@@ -938,6 +938,31 @@ describe('Date picker', () => {
       expect(selectedMonths).lengthOf(1);
     });
 
+    it('should update the calendar view when typing, i.e. switch to other month', async () => {
+      const eventSpy = spy(picker, 'emitEvent');
+      const date = new CalendarDay({ year: 2025, month: 1, date: 1 });
+      picker.value = date.native;
+      picker.open = true;
+      picker.inputFormat = 'MM/dd/yyyy';
+      await elementUpdated(picker);
+
+      dateTimeInput.focus();
+      dateTimeInput.setSelectionRange(0, 1);
+      await elementUpdated(picker);
+
+      simulateKeyboard(dateTimeInput, arrowUp);
+      simulateKeyboard(dateTimeInput, arrowUp);
+
+      await elementUpdated(picker);
+
+      expect(eventSpy).calledWith('igcInput');
+      expect(eventSpy).not.calledWith('igcChange');
+
+      const expectedValue = new CalendarDay({ year: 2025, month: 3, date: 1 })
+        .native;
+      checkDatesEqual(calendar.activeDate, expectedValue);
+    });
+
     describe('Readonly state', () => {
       describe('Dropdown mode', () => {
         beforeEach(async () => {

src/components/date-picker/date-picker.ts

@@ -541,7 +541,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
     super.handleAnchorClick();
     await this.updateComplete;
-    this._calendar[focusActiveDate]();
+    this._calendar[focusActiveDate]({ preventScroll: true });
   }
 
   protected _handleInputChangeEvent(event: CustomEvent<Date>): void {
@@ -583,6 +583,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
     }
 
     this.value = (event.target as IgcDateTimeInputComponent).value!;
+    this._calendar.activeDate = this.value ?? this._calendar.activeDate;
     this.emitEvent('igcInput', { detail: this.value });
   }