Skip to content

Commit 411ebba

Browse files
zdrawkuzdrawku
authored
Merge pull request #8068 from IgniteUI/ddincheva/monthPicker
igx-month-picker should emit onSelection only when the selected month is changed
2 parents 7fc8c04 + bff8a8f commit 411ebba

File tree

3 files changed

+77
-53
lines changed

3 files changed

+77
-53
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div *ngIf="isDefaultView" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
22
<div class="igx-calendar-picker">
3-
<div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)" [ngStyle]="{
3+
<div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="changeYearKB($event, false)" [ngStyle]="{
44
'min-width.%': 25,
55
'left': 0
66
}">
@@ -11,7 +11,7 @@
1111
{{ formattedYear(viewDate) }}
1212
</span>
1313
</div>
14-
<div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="nextYearKB($event)" [ngStyle]="{
14+
<div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="changeYearKB($event)" [ngStyle]="{
1515
'min-width.%': 25,
1616
'right': 0
1717
}">

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,73 @@ describe('IgxMonthPicker', () => {
275275
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
276276
});
277277

278+
it('should not emit onSelection when navigating to the next year', () => {
279+
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
280+
fixture.detectChanges();
281+
282+
const dom = fixture.debugElement;
283+
const monthPicker = fixture.componentInstance.monthPicker;
284+
spyOn(monthPicker.onSelection, 'emit').and.callThrough();
285+
286+
const next = dom.query(By.css('.igx-calendar-picker__next'));
287+
let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
288+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
289+
290+
UIInteractions.simulateClickEvent(next.nativeElement);
291+
fixture.detectChanges();
292+
UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
293+
fixture.detectChanges();
294+
295+
expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
296+
yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
297+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
298+
});
299+
300+
it('should not emit onSelection when navigating to the previous year', () => {
301+
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
302+
fixture.detectChanges();
303+
304+
const dom = fixture.debugElement;
305+
const monthPicker = fixture.componentInstance.monthPicker;
306+
spyOn(monthPicker.onSelection, 'emit').and.callThrough();
307+
308+
const prev = dom.query(By.css('.igx-calendar-picker__prev'));
309+
let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
310+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
311+
312+
UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
313+
fixture.detectChanges();
314+
UIInteractions.simulateClickEvent(prev.nativeElement);
315+
fixture.detectChanges();
316+
317+
expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
318+
yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
319+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2017');
320+
});
321+
322+
it('should not emit onSelection when changing the year', () => {
323+
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
324+
fixture.detectChanges();
325+
326+
const dom = fixture.debugElement;
327+
const monthPicker = fixture.componentInstance.monthPicker;
328+
spyOn(monthPicker.onSelection, 'emit').and.callThrough();
329+
330+
let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
331+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
332+
333+
UIInteractions.simulateClickEvent(yearBtn.nativeElement);
334+
fixture.detectChanges();
335+
336+
const year = dom.nativeElement.querySelector('.igx-calendar__year');
337+
UIInteractions.simulateClickEvent(year);
338+
fixture.detectChanges();
339+
340+
expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
341+
yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
342+
expect(yearBtn.nativeElement.textContent.trim()).toMatch('2016');
343+
});
344+
278345
it('should open years view, navigate through and select an year via KB.', () => {
279346
const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
280347
fixture.detectChanges();

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

Lines changed: 8 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -124,13 +124,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
124124
super.activeViewDecadeKB(event);
125125

126126
if (event.key === KEYS.RIGHT_ARROW || event.key === KEYS.RIGHT_ARROW_IE) {
127-
event.preventDefault();
128-
this.nextYear();
127+
this.nextYear(event);
129128
}
130129

131130
if (event.key === KEYS.LEFT_ARROW || event.key === KEYS.LEFT_ARROW_IE) {
132-
event.preventDefault();
133-
this.previousYear();
131+
this.previousYear(event);
134132
}
135133

136134
requestAnimationFrame(() => {
@@ -152,48 +150,10 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
152150
/**
153151
* @hidden
154152
*/
155-
public nextYear() {
156-
this.yearAction = 'next';
157-
this.previousViewDate = this.viewDate;
158-
this.viewDate = this.calendarModel.getNextYear(this.viewDate);
159-
160-
this.selectDate(this.viewDate);
161-
this.onSelection.emit(this.selectedDates);
162-
}
163-
164-
/**
165-
* @hidden
166-
*/
167-
public nextYearKB(event) {
153+
public changeYearKB(event, next = true) {
168154
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
169-
event.preventDefault();
170155
event.stopPropagation();
171-
172-
this.nextYear();
173-
}
174-
}
175-
176-
/**
177-
* @hidden
178-
*/
179-
public previousYear() {
180-
this.yearAction = 'prev';
181-
this.previousViewDate = this.viewDate;
182-
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
183-
184-
this.selectDate(this.viewDate);
185-
this.onSelection.emit(this.selectedDates);
186-
}
187-
188-
/**
189-
* @hidden
190-
*/
191-
public previousYearKB(event) {
192-
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
193-
event.preventDefault();
194-
event.stopPropagation();
195-
196-
this.previousYear();
156+
next ? this.nextYear(event) : this.previousYear(event);
197157
}
198158
}
199159

@@ -205,9 +165,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
205165
this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
206166
this.activeView = CalendarView.DEFAULT;
207167

208-
this.selectDate(event);
209-
this.onSelection.emit(this.selectedDates);
210-
211168
requestAnimationFrame(() => {
212169
if (this.yearsBtn) { this.yearsBtn.nativeElement.focus(); }
213170
});
@@ -252,8 +209,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
252209
* @hidden
253210
*/
254211
@HostListener('keydown.pageup', ['$event'])
255-
public onKeydownPageUp(event: KeyboardEvent) {
256-
event.preventDefault();
212+
public previousYear(event?: KeyboardEvent) {
213+
event?.preventDefault();
257214
this.yearAction = 'prev';
258215
this.previousViewDate = this.viewDate;
259216
this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
@@ -263,8 +220,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
263220
* @hidden
264221
*/
265222
@HostListener('keydown.pagedown', ['$event'])
266-
public onKeydownPageDown(event: KeyboardEvent) {
267-
event.preventDefault();
223+
public nextYear(event?: KeyboardEvent) {
224+
event?.preventDefault();
268225
this.yearAction = 'next';
269226
this.previousViewDate = this.viewDate;
270227
this.viewDate = this.calendarModel.getNextYear(this.viewDate);

0 commit comments

Comments
 (0)