Merge pull request #8069 from IgniteUI/ddincheva/monthPicker-9.1.x

igx-month-picker should emit onSelection only when the selected month is changed - 9.1.x

Author: zdrawku

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.spec.ts

@@ -275,6 +275,73 @@ describe('IgxMonthPicker', () => {
         expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
     });
 
+    it('should not emit onSelection when navigating to the next year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        const next = dom.query(By.css('.igx-calendar-picker__next'));
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.simulateClickEvent(next.nativeElement);
+        fixture.detectChanges();
+        UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+    });
+
+    it('should not emit onSelection when navigating to the previous year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
+        fixture.detectChanges();
+        UIInteractions.simulateClickEvent(prev.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2017');
+    });
+
+    it('should not emit onSelection when changing the year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.simulateClickEvent(yearBtn.nativeElement);
+        fixture.detectChanges();
+
+        const year = dom.nativeElement.querySelector('.igx-calendar__year');
+        UIInteractions.simulateClickEvent(year);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2016');
+    });
+
     it('should open years view, navigate through and select an year via KB.', () => {
         const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
         fixture.detectChanges();

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) {
+    public changeYearKB(event, next = true) {
         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) {
-        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);
         }
     }
 
@@ -188,9 +150,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = CalendarView.DEFAULT;
 
-        this.selectDate(event);
-        this.onSelection.emit(this.selectedDates);
-
         requestAnimationFrame(() => {
             if (this.yearsBtn) { this.yearsBtn.nativeElement.focus(); }
         });
@@ -235,8 +194,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 +204,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);
     }