fix(month picker): enhance KB navigation and model updating #3126

IgniteUI · Feb 20, 2019 · 6503be9 · 6503be9
1 parent 9e7925f
commit 6503be9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts
@@ -259,6 +259,20 @@ describe('IgxMonthPicker', () => {
 
         expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
         expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+
+        yearBtn.nativeElement.focus();
+
+        UIInteractions.simulateKeyDownEvent(yearBtn.nativeElement, 'ArrowRight');
+        fixture.detectChanges();
+
+        expect(monthPicker.viewDate.getFullYear()).toEqual(2022);
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2022');
+
+        UIInteractions.simulateKeyDownEvent(yearBtn.nativeElement, 'ArrowLeft');
+        fixture.detectChanges();
+
+        expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
     });
 
     it('should open years view, navigate through and select an year via KB.', () => {

diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
@@ -82,12 +82,38 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
         this.yearAction = '';
     }
 
+    /**
+     * @hidden
+     */
+    public activeViewDecadeKB(event) {
+        super.activeViewDecadeKB(event);
+
+        if (event.key === KEYS.RIGHT_ARROW || event.key === KEYS.RIGHT_ARROW_IE) {
+            event.preventDefault();
+            this.nextYear(true);
+
+            this._onChangeCallback(this.viewDate);
+            this.onSelection.emit(this.viewDate);
+        }
+
+        if (event.key === KEYS.LEFT_ARROW || event.key === KEYS.LEFT_ARROW_IE) {
+            event.preventDefault();
+            this.previousYear(true);
+
+            this._onChangeCallback(this.viewDate);
+            this.onSelection.emit(this.viewDate);
+        }
+    }
+
     /**
      * @hidden
      */
     public nextYear(kbTrigger = false) {
         this.yearAction = 'next';
         super.nextYear(kbTrigger);
+
+        this._onChangeCallback(this.viewDate);
+        this.onSelection.emit(this.viewDate);
     }
 
     /**
@@ -108,6 +134,9 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
     public previousYear(kbTrigger = false) {
         this.yearAction = 'prev';
         super.previousYear(kbTrigger);
+
+        this._onChangeCallback(this.viewDate);
+        this.onSelection.emit(this.viewDate);
     }
 
     /**
@@ -125,25 +154,28 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
     /**
      * @hidden
      */
-    public selectMonth(event: Date) {
+    public selectYear(event: Date) {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
-        this._onChangeCallback(this.viewDate);
+        this.activeView = CalendarView.DEFAULT;
 
+        this._onChangeCallback(this.viewDate);
         this.onSelection.emit(this.viewDate);
+
+        requestAnimationFrame(() => {
+            this.yearsBtn.nativeElement.focus();
+        });
     }
 
     /**
      * @hidden
      */
-    public selectYear(event: Date) {
+    public selectMonth(event: Date) {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
-        this.activeView = CalendarView.DEFAULT;
+        this._onChangeCallback(this.viewDate);
 
-        requestAnimationFrame(() => {
-            this.yearsBtn.nativeElement.focus();
-        });
+        this.onSelection.emit(this.viewDate);
     }
-
+    
     /**
      * Selects a date.
      *```typescript