diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 4da802b9a..5829ebba5 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -253,19 +253,21 @@ export default class IgcCalendarComponent extends EventEmitterMixin< } /** @private @hidden @internal */ - public async [focusActiveDate]() { + public async [focusActiveDate](options?: FocusOptions) { await this.updateComplete; if (this._isDayView) { - return this.daysViews.item(this.activeDaysViewIndex).focusActiveDate(); + return this.daysViews + .item(this.activeDaysViewIndex) + .focusActiveDate(options); } if (this._isMonthView) { - return this.monthsView.focusActiveDate(); + return this.monthsView.focusActiveDate(options); } if (this._isYearView) { - return this.yearsView.focusActiveDate(); + return this.yearsView.focusActiveDate(options); } } diff --git a/src/components/calendar/days-view/days-view.ts b/src/components/calendar/days-view/days-view.ts index 9642c1d13..32857f0e1 100644 --- a/src/components/calendar/days-view/days-view.ts +++ b/src/components/calendar/days-view/days-view.ts @@ -147,8 +147,8 @@ export default class IgcDaysViewComponent extends EventEmitterMixin< } /** Focuses the active date. */ - public focusActiveDate() { - this.activeDay.focus(); + public focusActiveDate(options?: FocusOptions) { + this.activeDay.focus(options); } protected handleInteraction(event: Event) { diff --git a/src/components/calendar/months-view/months-view.ts b/src/components/calendar/months-view/months-view.ts index 4de5a5cc1..de8aef23b 100644 --- a/src/components/calendar/months-view/months-view.ts +++ b/src/components/calendar/months-view/months-view.ts @@ -99,8 +99,8 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin< } /** Focuses the active date. */ - public focusActiveDate() { - this.activeMonth.focus(); + public focusActiveDate(options?: FocusOptions) { + this.activeMonth.focus(options); } protected handleInteraction(event: Event) { diff --git a/src/components/calendar/years-view/years-view.ts b/src/components/calendar/years-view/years-view.ts index 8b9249041..4e417e3fc 100644 --- a/src/components/calendar/years-view/years-view.ts +++ b/src/components/calendar/years-view/years-view.ts @@ -79,8 +79,8 @@ export default class IgcYearsViewComponent extends EventEmitterMixin< this.role = 'grid'; } - public focusActiveDate() { - this.activeYear.focus(); + public focusActiveDate(options?: FocusOptions) { + this.activeYear.focus(options); } protected handleInteraction(event: Event) { diff --git a/src/components/date-range-picker/date-range-picker.ts b/src/components/date-range-picker/date-range-picker.ts index c45dfec4e..08f7d9c7a 100644 --- a/src/components/date-range-picker/date-range-picker.ts +++ b/src/components/date-range-picker/date-range-picker.ts @@ -763,11 +763,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM } protected override async handleAnchorClick() { - this._calendar.activeDate = - this._firstDefinedInRange ?? this._calendar.activeDate; super.handleAnchorClick(); + this._setCalendarActiveDateAndViewIndex(); await this.updateComplete; - this._calendar[focusActiveDate](); + this._calendar[focusActiveDate]({ preventScroll: true }); } protected async _handleCalendarChangeEvent(event: CustomEvent) { @@ -806,6 +805,18 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM this.value = this._oldValue; } + /** + * Sets the active date of the calendar based on current selection, if any, + * or its current active date and its active day view index to always be the first one. + */ + private _setCalendarActiveDateAndViewIndex() { + const activeDaysViewIndex = 'activeDaysViewIndex'; + + this._calendar.activeDate = + this._firstDefinedInRange ?? this._calendar.activeDate; + this._calendar[activeDaysViewIndex] = 0; + } + private _getUpdatedDateRange( input: IgcDateTimeInputComponent, newValue: Date | null