fix(IgxCalendar): should not throw an error when press pgDown/Up #8074

Author: ddincheva

projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts

@@ -3,7 +3,7 @@ import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxCalendarComponent, IgxCalendarModule } from './public_api';
 import { IgxDatePickerComponent, IgxDatePickerModule } from '../date-picker/date-picker.component';
 import { DateRangeType } from '../core/dates';
@@ -752,9 +752,9 @@ describe('Multi-View Calendar - ', () => {
             expect(document.activeElement).toEqual(monthDates[10]);
         }));
 
-        it('Verify that months increment/decrement continuously on enter keydown', (fakeAsync(() => {
+        it('Verify that months increment/decrement continuously on enter keydown', (async() => {
             calendar.monthsViewNumber = 2;
-            tick(100);
+            await wait(100);
             fixture.detectChanges();
             const dates = [new Date('2019-10-15'), new Date('2019-11-15'), new Date('2019-12-15'),
             new Date('2020-1-15'), new Date('2020-2-15'), new Date('2020-3-15'), new Date('2020-4-15')];
@@ -764,20 +764,21 @@ describe('Multi-View Calendar - ', () => {
             for (let i = 1; i < dates.length - 1; i++) {
                 const arrowRight = HelperTestFunctions.getNexArrowElement(fixture);
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowRight);
-                tick(100);
+                fixture.detectChanges();
+                await wait(100);
                 fixture.detectChanges();
 
                 HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[i], dates[i + 1]]);
             }
-            for (let index = dates.length - 2; index > 0; index--) {
+             for (let index = dates.length - 2; index > 0; index--) {
                 const arrowLeft = HelperTestFunctions.getPreviousArrowElement(fixture);
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowLeft);
-                tick(100);
                 fixture.detectChanges();
-
+                await wait(200);
+                fixture.detectChanges();
                 HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[index - 1], dates[index]]);
             }
-        })));
+        }));
 
         it('Verify that months increment/decrement continuously on mouse down', (fakeAsync(() => {
             calendar.monthsViewNumber = 2;

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -746,21 +746,24 @@ describe('IgxCalendar - ', () => {
                 });
             });
 
-            it('Calendar keyboard navigation - PageUp/PageDown', () => {
+            it('Calendar keyboard navigation - PageUp/PageDown', fakeAsync(() => {
                 const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));
 
                 UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement);
                 fixture.detectChanges();
+                tick(100);
                 expect(calendar.viewDate.getMonth()).toEqual(4);
 
                 calendar.viewDate = new Date(2017, 5, 13);
                 fixture.detectChanges();
                 UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement);
                 fixture.detectChanges();
+                tick(100);
 
                 expect(calendar.viewDate.getMonth()).toEqual(6);
                 UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement, true, false, true);
                 fixture.detectChanges();
+                tick(100);
 
                 expect(calendar.viewDate.getFullYear()).toEqual(2016);
 
@@ -769,9 +772,10 @@ describe('IgxCalendar - ', () => {
 
                 UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement, true, false, true);
                 fixture.detectChanges();
+                tick(100);
 
                 expect(calendar.viewDate.getFullYear()).toEqual(2018);
-            });
+            }));
 
             it('Calendar keyboard navigation - Home/End/Enter', () => {
                 const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));

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

@@ -477,6 +477,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public previousMonth(isKeydownTrigger = false) {
+        debugger;
+        if (isKeydownTrigger && this.animationAction === ScrollMonth.NEXT) { return; }
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
         this.animationAction = ScrollMonth.PREV;
@@ -490,6 +492,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public nextMonth(isKeydownTrigger = false) {
+        if (isKeydownTrigger && this.animationAction === 'prev') { return; }
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
@@ -504,7 +507,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public startPrevMonthScroll = (isKeydownTrigger = false) => {
         this.startMonthScroll$.next();
         this.monthScrollDirection = ScrollMonth.PREV;
-
+        this.animationAction = ScrollMonth.PREV;
         this.previousMonth(isKeydownTrigger);
     }
 
@@ -516,7 +519,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public startNextMonthScroll = (isKeydownTrigger = false) => {
         this.startMonthScroll$.next();
         this.monthScrollDirection = ScrollMonth.NEXT;
-
+        this.animationAction = ScrollMonth.NEXT;
         this.nextMonth(isKeydownTrigger);
     }
 
@@ -775,11 +778,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     @HostListener('keydown.pageup', ['$event'])
     public onKeydownPageDown(event: KeyboardEvent) {
         event.preventDefault();
-
         if (this.activeView !== CalendarView.DEFAULT) {
             return;
         }
 
+
         const isPageDown = event.key === 'PageDown';
         const step = isPageDown ? 1 : -1;
         let monthView = this.daysView as IgxDaysViewComponent;
@@ -822,8 +825,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             };
         }
 
-        if (isPageDown) { this.nextMonth(true); } else {
-            this.previousMonth(true);
+        if (isPageDown) {
+            event.repeat ? requestAnimationFrame(() => this.nextMonth(true)) : this.nextMonth(true);
+        } else {
+            event.repeat ? requestAnimationFrame(() => this.previousMonth(true)) : this.previousMonth(true);
         }
     }