From 867aac468d57ae4871033064974ec33f4e6992b6 Mon Sep 17 00:00:00 2001
From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
Date: Mon, 27 Jan 2025 10:07:29 +0200
Subject: [PATCH] fix(month-view/year-view): create onMouseDown events (#15290)

---
 .../lib/calendar/months-view/months-view.component.html  | 1 +
 .../lib/calendar/months-view/months-view.component.ts    | 9 +++++++++
 .../lib/calendar/years-view/years-view.component.html    | 1 +
 .../src/lib/calendar/years-view/years-view.component.ts  | 9 +++++++++
 4 files changed, 20 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
index af95a79931d..aeca84c201d 100644
--- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
+++ b/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 }}
diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts
index 8323a1f79c3..f41f532facf 100644
--- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts
+++ b/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.
      *
diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html
index bebc8f46e58..28082a19ab9 100644
--- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html
+++ b/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 }}
diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
index 5e99cb57633..ccdc538e67c 100644
--- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts
+++ b/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();
+        }
+    }
 }