diff --git a/src/components/date-picker/date-picker.spec.ts b/src/components/date-picker/date-picker.spec.ts index 2fd882c2a..ed2c96d73 100644 --- a/src/components/date-picker/date-picker.spec.ts +++ b/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 () => { diff --git a/src/components/date-picker/date-picker.ts b/src/components/date-picker/date-picker.ts index 27fd28ed2..dcb0f5867 100644 --- a/src/components/date-picker/date-picker.ts +++ b/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): 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 }); }