fix(date-range-picker): Consistent focus on open and active day view (#1743)

This PR prevents the focus scroll after opening the dropdown of
a date range picker, causing a viewport shift which leads to deteriorated UX.

It will also set the active days view index to always be the first one,
improving UX after selection is made.

Author: rkaraivanov

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);
     }
   }
 

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) {

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) {

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) {

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<Date>) {
@@ -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