fix(month-view/year-view): create onMouseDown events (#15290)

Author: didimmova

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html

@@ -12,6 +12,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedMonth(month).formatted | titlecase }}

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -135,6 +135,15 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
         super(dayInterval);
     }
 
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
+
     /**
      * Returns the locale representation of the month in the months view.
      *

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html

@@ -13,6 +13,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedYear(year).formatted }}

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -154,4 +154,13 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
             year: this.yearFormat,
         });
     }
+
+    /**
+     * @hidden
+     */
+    protected onMouseDown() {
+        if (this.tabIndex !== -1) {
+            this.el.nativeElement.focus();
+        }
+    }
 }