fix(IgxMonthPicker): should not emit onSelection event when change years #7456

Author: ddincheva

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="isDefaultView" [@animateView]="activeView" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
     <div class="igx-calendar-picker">
-        <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)" [ngStyle]="{
+        <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="changeYearKB($event, false)" [ngStyle]="{
             'min-width.%': 25,
             'left': 0
         }">
@@ -11,7 +11,7 @@
                 {{ formattedYear(viewDate) }}
             </span>
         </div>
-        <div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="nextYearKB($event)" [ngStyle]="{
+        <div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="changeYearKB($event)" [ngStyle]="{
             'min-width.%': 25,
             'right': 0
         }">

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

@@ -110,13 +110,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
         super.activeViewDecadeKB(event);
 
         if (event.key === KEYS.RIGHT_ARROW || event.key === KEYS.RIGHT_ARROW_IE) {
-            event.preventDefault();
-            this.nextYear();
+            this.nextYear(event);
         }
 
         if (event.key === KEYS.LEFT_ARROW || event.key === KEYS.LEFT_ARROW_IE) {
-            event.preventDefault();
-            this.previousYear();
+            this.previousYear(event);
         }
 
         requestAnimationFrame(() => {
@@ -138,46 +136,10 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     /**
      * @hidden
      */
-    public nextYear() {
-        this.yearAction = 'next';
-        this.viewDate = this.calendarModel.getNextYear(this.viewDate);
-
-        this.selectDate(this.viewDate);
-        this.onSelection.emit(this.selectedDates);
-    }
-
-    /**
-     * @hidden
-     */
-    public nextYearKB(event) {
-        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.nextYear();
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    public previousYear() {
-        this.yearAction = 'prev';
-        this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
-
-        this.selectDate(this.viewDate);
-        this.onSelection.emit(this.selectedDates);
-    }
-
-    /**
-     * @hidden
-     */
-    public previousYearKB(event) {
+    public changeYearKB(event, next = true) {
         if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
-            event.preventDefault();
             event.stopPropagation();
-
-            this.previousYear();
+            next ? this.nextYear(event) :  this.previousYear(event);
         }
     }
 
@@ -235,8 +197,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      * @hidden
      */
     @HostListener('keydown.pageup', ['$event'])
-    public onKeydownPageUp(event: KeyboardEvent) {
-        event.preventDefault();
+    public previousYear(event?: KeyboardEvent) {
+        event?.preventDefault();
         this.yearAction = 'prev';
         this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
     }
@@ -245,8 +207,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      * @hidden
      */
     @HostListener('keydown.pagedown', ['$event'])
-    public onKeydownPageDown(event: KeyboardEvent) {
-        event.preventDefault();
+    public nextYear(event?: KeyboardEvent) {
+        event?.preventDefault();
         this.yearAction = 'next';
         this.viewDate = this.calendarModel.getNextYear(this.viewDate);
     }