fix(month-picker): update keyboard navigation in zoneless apps

projects/igniteui-angular/calendar/src/calendar/calendar.services.ts

@@ -1,11 +1,12 @@
-import { Injectable, ElementRef, NgZone, inject } from "@angular/core";
+import { ChangeDetectorRef, ElementRef, Injectable, NgZone, inject } from "@angular/core";
 import { EventManager } from "@angular/platform-browser";
 import { PlatformUtil } from 'igniteui-angular/core';
 
 @Injectable()
 export class KeyboardNavigationService {
     private eventManager = inject(EventManager);
     private ngZone = inject(NgZone);
+    private cdr = inject(ChangeDetectorRef);
 
     private keyHandlers = new Map<string, (event: KeyboardEvent) => void>();
     private eventUnsubscribeFn: Function | null = null;
@@ -26,7 +27,10 @@ export class KeyboardNavigationService {
                     const handler = this.keyHandlers.get(event.key);
 
                     if (handler) {
-                        this.ngZone.run(handler.bind(context, event));
+                        this.ngZone.run(() => {
+                            handler.call(context, event);
+                            this.cdr.markForCheck();
+                        });
                     }
                 }
             );

projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, provideZonelessChangeDetection, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -729,6 +729,7 @@ describe('IgxMonthPicker', () => {
 
         expect(monthPicker.activeView).toBe(IgxCalendarView.Decade);
     });
+
 });
 
 @Component({
@@ -754,3 +755,34 @@ export class IgxMonthPickerSampleComponent {
         year: 'numeric'
     };
 }
+
+describe('IgxMonthPicker in zoneless change detection', () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [NoopAnimationsModule, IgxMonthPickerSampleComponent],
+            providers: [provideZonelessChangeDetection()]
+        }).compileComponents();
+    });
+
+    it('should update the highlighted month after mouse and keyboard navigation', async () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const monthPicker = fixture.componentInstance.monthPicker;
+        const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper'));
+        const months = fixture.debugElement.queryAll(By.css('.igx-calendar-view__item'));
+        UIInteractions.simulateMouseDownEvent(months[2].nativeElement.firstChild);
+        await fixture.whenStable();
+
+        expect(document.activeElement).toBe(wrapper.nativeElement);
+        const initiallyHighlightedMonth = fixture.debugElement.query(By.css('.igx-calendar-view__item--selected'));
+        UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', wrapper.nativeElement);
+        await fixture.whenStable();
+
+        expect(monthPicker.monthsView.date.getMonth()).toBe(3);
+        const highlightedMonth = fixture.debugElement.query(By.css('.igx-calendar-view__item--selected'));
+        expect(highlightedMonth.nativeElement).not.toBe(initiallyHighlightedMonth.nativeElement);
+        expect(highlightedMonth.nativeElement.textContent.trim()).toBe('Apr');
+    });
+});