Skip to content

Commit 1f61938

Browse files
zdrawkuzdrawku
authored
Merge pull request #8090 from IgniteUI/ddincheva/monthPickerAnimation-9.1
Month picker should not thrown an error when navigating with PgUp and PgDown - 9.1.x
2 parents ec77289 + eead463 commit 1f61938

File tree

5 files changed

+49
-28
lines changed

5 files changed

+49
-28
lines changed

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
33
import { FormsModule } from '@angular/forms';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { configureTestSuite } from '../test-utils/configure-suite';
6-
import { UIInteractions } from '../test-utils/ui-interactions.spec';
6+
import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
77
import { IgxCalendarComponent, IgxCalendarModule } from './public_api';
88
import { IgxDatePickerComponent, IgxDatePickerModule } from '../date-picker/date-picker.component';
99
import { DateRangeType } from '../core/dates';
@@ -752,9 +752,9 @@ describe('Multi-View Calendar - ', () => {
752752
expect(document.activeElement).toEqual(monthDates[10]);
753753
}));
754754

755-
it('Verify that months increment/decrement continuously on enter keydown', (fakeAsync(() => {
755+
it('Verify that months increment/decrement continuously on enter keydown', (async() => {
756756
calendar.monthsViewNumber = 2;
757-
tick(100);
757+
await wait(100);
758758
fixture.detectChanges();
759759
const dates = [new Date('2019-10-15'), new Date('2019-11-15'), new Date('2019-12-15'),
760760
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 - ', () => {
764764
for (let i = 1; i < dates.length - 1; i++) {
765765
const arrowRight = HelperTestFunctions.getNexArrowElement(fixture);
766766
UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowRight);
767-
tick(100);
767+
fixture.detectChanges();
768+
await wait(100);
768769
fixture.detectChanges();
769770

770771
HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[i], dates[i + 1]]);
771772
}
772-
for (let index = dates.length - 2; index > 0; index--) {
773+
for (let index = dates.length - 2; index > 0; index--) {
773774
const arrowLeft = HelperTestFunctions.getPreviousArrowElement(fixture);
774775
UIInteractions.triggerKeyDownEvtUponElem('Enter', arrowLeft);
775-
tick(100);
776776
fixture.detectChanges();
777-
777+
await wait(200);
778+
fixture.detectChanges();
778779
HelperTestFunctions.verifyCalendarSubHeaders(fixture, [dates[index - 1], dates[index]]);
779780
}
780-
})));
781+
}));
781782

782783
it('Verify that months increment/decrement continuously on mouse down', (fakeAsync(() => {
783784
calendar.monthsViewNumber = 2;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -705,21 +705,24 @@ describe('IgxCalendar - ', () => {
705705
});
706706
});
707707

708-
it('Calendar keyboard navigation - PageUp/PageDown', () => {
708+
it('Calendar keyboard navigation - PageUp/PageDown', fakeAsync(() => {
709709
const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));
710710

711711
UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement);
712712
fixture.detectChanges();
713+
tick(100);
713714
expect(calendar.viewDate.getMonth()).toEqual(4);
714715

715716
calendar.viewDate = new Date(2017, 5, 13);
716717
fixture.detectChanges();
717718
UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement);
718719
fixture.detectChanges();
720+
tick(100);
719721

720722
expect(calendar.viewDate.getMonth()).toEqual(6);
721723
UIInteractions.triggerKeyDownEvtUponElem('PageUp', component.nativeElement, true, false, true);
722724
fixture.detectChanges();
725+
tick(100);
723726

724727
expect(calendar.viewDate.getFullYear()).toEqual(2016);
725728

@@ -728,9 +731,10 @@ describe('IgxCalendar - ', () => {
728731

729732
UIInteractions.triggerKeyDownEvtUponElem('PageDown', component.nativeElement, true, false, true);
730733
fixture.detectChanges();
734+
tick(100);
731735

732736
expect(calendar.viewDate.getFullYear()).toEqual(2018);
733-
});
737+
}));
734738

735739
it('Calendar keyboard navigation - Home/End/Enter', () => {
736740
const component = dom.query(By.css(HelperTestFunctions.CALENDAR_CSSCLASS));

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -466,6 +466,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
466466
* @internal
467467
*/
468468
public previousMonth(isKeydownTrigger = false) {
469+
if (isKeydownTrigger && this.animationAction === ScrollMonth.NEXT) { return; }
469470
this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
470471
this.animationAction = ScrollMonth.PREV;
471472
this.isKeydownTrigger = isKeydownTrigger;
@@ -478,6 +479,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
478479
* @internal
479480
*/
480481
public nextMonth(isKeydownTrigger = false) {
482+
if (isKeydownTrigger && this.animationAction === 'prev') { return; }
481483
this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
482484
this.animationAction = ScrollMonth.NEXT;
483485
this.isKeydownTrigger = isKeydownTrigger;
@@ -491,7 +493,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
491493
public startPrevMonthScroll = (isKeydownTrigger = false) => {
492494
this.startMonthScroll$.next();
493495
this.monthScrollDirection = ScrollMonth.PREV;
494-
496+
this.animationAction = ScrollMonth.PREV;
495497
this.previousMonth(isKeydownTrigger);
496498
}
497499

@@ -503,7 +505,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
503505
public startNextMonthScroll = (isKeydownTrigger = false) => {
504506
this.startMonthScroll$.next();
505507
this.monthScrollDirection = ScrollMonth.NEXT;
506-
508+
this.animationAction = ScrollMonth.NEXT;
507509
this.nextMonth(isKeydownTrigger);
508510
}
509511

@@ -745,11 +747,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
745747
@HostListener('keydown.pageup', ['$event'])
746748
public onKeydownPageDown(event: KeyboardEvent) {
747749
event.preventDefault();
748-
749750
if (this.activeView !== CalendarView.DEFAULT) {
750751
return;
751752
}
752753

754+
753755
const isPageDown = event.key === 'PageDown';
754756
const step = isPageDown ? 1 : -1;
755757
let monthView = this.daysView as IgxDaysViewComponent;
@@ -792,8 +794,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
792794
};
793795
}
794796

795-
if (isPageDown) { this.nextMonth(true); } else {
796-
this.previousMonth(true);
797+
if (isPageDown) {
798+
event.repeat ? requestAnimationFrame(() => this.nextMonth(true)) : this.nextMonth(true);
799+
} else {
800+
event.repeat ? requestAnimationFrame(() => this.previousMonth(true)) : this.previousMonth(true);
797801
}
798802
}
799803

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild } from '@angular/core';
2-
import { TestBed } from '@angular/core/testing';
2+
import { TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
33
import { FormsModule } from '@angular/forms';
44
import { By } from '@angular/platform-browser';
55
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -259,21 +259,35 @@ describe('IgxMonthPicker', () => {
259259

260260
expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
261261
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
262+
});
262263

264+
it('should navigate to the previous/next year via arrowLeft and arrowRight', fakeAsync(() => {
265+
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
266+
fixture.detectChanges();
267+
tick();
268+
flush();
269+
270+
const monthPicker = fixture.componentInstance.monthPicker;
271+
const yearBtn = fixture.debugElement.query(By.css('.igx-calendar-picker__date'));
272+
273+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
263274
yearBtn.nativeElement.focus();
264275

265-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', yearBtn.nativeElement);
276+
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', yearBtn.nativeElement);
266277
fixture.detectChanges();
278+
tick(50);
279+
flush();
267280

268-
expect(monthPicker.viewDate.getFullYear()).toEqual(2022);
269-
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2022');
281+
expect(monthPicker.viewDate.getFullYear()).toEqual(2018);
282+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2018');
270283

271-
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', yearBtn.nativeElement);
284+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', yearBtn.nativeElement);
272285
fixture.detectChanges();
286+
flush();
273287

274-
expect(monthPicker.viewDate.getFullYear()).toEqual(2021);
275-
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
276-
});
288+
expect(monthPicker.viewDate.getFullYear()).toEqual(2019);
289+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
290+
}));
277291

278292
it('should not emit onSelection when navigating to the next year', () => {
279293
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
139139
public changeYearKB(event, next = true) {
140140
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
141141
event.stopPropagation();
142-
next ? this.nextYear(event) : this.previousYear(event);
142+
next ? this.nextYear() : this.previousYear();
143143
}
144144
}
145145

@@ -173,8 +173,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
173173
if (!value) {
174174
return new Date();
175175
}
176-
177-
// TO DO: to be refactored after discussion on the desired behavior
178176
super.selectDate(value);
179177
this.viewDate = value;
180178
}
@@ -183,8 +181,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
183181
* @hidden
184182
*/
185183
public writeValue(value: Date) {
186-
187-
// TO DO: to be refactored after discussion on the desired behavior
188184
if (value) {
189185
this.viewDate = this.selectedDates = value;
190186
}
@@ -196,6 +192,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
196192
@HostListener('keydown.pageup', ['$event'])
197193
public previousYear(event?: KeyboardEvent) {
198194
event?.preventDefault();
195+
if (event && this.yearAction === 'next') { return; }
199196
this.yearAction = 'prev';
200197
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
201198
}
@@ -206,6 +203,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
206203
@HostListener('keydown.pagedown', ['$event'])
207204
public nextYear(event?: KeyboardEvent) {
208205
event?.preventDefault();
206+
if (event && this.yearAction === 'prev') { return; }
209207
this.yearAction = 'next';
210208
this.viewDate = this.calendarModel.getNextYear(this.viewDate);
211209
}

0 commit comments

Comments
 (0)