Skip to content

Commit 2e006ff

Browse files
hanastasovhanastasov
committed
fix(calendar): edge case and test kb navig #4282 
1 parent 8464b1f commit 2e006ff

File tree

3 files changed

+77
-30
lines changed

3 files changed

+77
-30
lines changed

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

+10
Original file line numberDiff line numberDiff line change
@@ -1804,6 +1804,8 @@ describe('IgxCalendar', () => {
18041804
fixture.detectChanges();
18051805

18061806
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
1807+
fixture.detectChanges();
1808+
await wait(400);
18071809
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
18081810
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
18091811
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
@@ -1818,6 +1820,8 @@ describe('IgxCalendar', () => {
18181820
fixture.detectChanges();
18191821

18201822
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
1823+
fixture.detectChanges();
1824+
await wait(400);
18211825
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowLeft');
18221826
fixture.detectChanges();
18231827
await wait(400);
@@ -1851,6 +1855,8 @@ describe('IgxCalendar', () => {
18511855
fixture.detectChanges();
18521856

18531857
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowDown');
1858+
fixture.detectChanges();
1859+
await wait(400);
18541860
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowDown');
18551861
fixture.detectChanges();
18561862
await wait(400);
@@ -1859,6 +1865,8 @@ describe('IgxCalendar', () => {
18591865
expect(date.nativeElement).toBe(document.activeElement);
18601866

18611867
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowDown');
1868+
fixture.detectChanges();
1869+
await wait(400);
18621870
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowDown');
18631871
fixture.detectChanges();
18641872
await wait(400);
@@ -1892,6 +1900,8 @@ describe('IgxCalendar', () => {
18921900
fixture.detectChanges();
18931901

18941902
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowDown');
1903+
fixture.detectChanges();
1904+
await wait(400);
18951905
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowRight');
18961906
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowRight');
18971907
fixture.detectChanges();

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

+58-25
Original file line numberDiff line numberDiff line change
@@ -257,23 +257,31 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
257257
const index = dates.indexOf(node);
258258

259259
if (!node) { return; }
260+
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', -7);
260261

261262
// focus item in current month
262263
for (let i = index; i - 7 > -1; i -= 7) {
263-
day = prevView ? node : dates[i - 7];
264+
day = prevView ? dates[i] : dates[i - 7];
265+
this.nextDate = day.date.date;
266+
if (day.date.isPrevMonth) {
267+
break;
268+
}
264269
if (this.isDayFocusable(day)) {
265270
day.nativeElement.focus();
266-
break;
271+
return;
267272
}
268273
}
269274

270275
// focus item in previous visible month
271-
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', -7);
272-
day = dates[index - 7];
273-
if (this.prevMonthView && ((day && day.date.isPrevMonth) || !day)) {
276+
if (this.prevMonthView) {
274277
dates = this.prevMonthView.dates.toArray();
275278
day = dates.find((item) => item.date.date.getTime() === this.nextDate.getTime());
276-
day.nativeElement.focus();
279+
280+
if (this.isDayFocusable(day)) {
281+
day.nativeElement.focus();
282+
return;
283+
}
284+
this.prevMonthView.focusPreviousUpDate(day.nativeElement);
277285
}
278286

279287
// focus item in next month, which is currently out of view
@@ -302,23 +310,31 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
302310
const index = dates.indexOf(node);
303311

304312
if (!node) { return; }
313+
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', 7);
305314

306315
// focus item in current month
307316
for (let i = index; i + 7 < 42; i += 7) {
308-
day = nextView ? node : dates[i + 7];
317+
day = nextView ? dates[i] : dates[i + 7];
318+
this.nextDate = day.date.date;
319+
if (day.date.isNextMonth) {
320+
break;
321+
}
309322
if (this.isDayFocusable(day)) {
310323
day.nativeElement.focus();
311-
break;
324+
return;
312325
}
313326
}
314327

315328
// focus item in next visible month
316-
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', 7);
317-
day = dates[index + 7];
318-
if (this.nextMonthView && ((day && day.date.isNextMonth) || !day)) {
329+
if (this.nextMonthView) {
319330
dates = this.nextMonthView.dates.toArray();
320331
day = dates.find((item) => item.date.date.getTime() === this.nextDate.getTime());
321-
day.nativeElement.focus();
332+
333+
if (this.isDayFocusable(day)) {
334+
day.nativeElement.focus();
335+
return;
336+
}
337+
this.nextMonthView.focusNextDownDate(day.nativeElement);
322338
}
323339

324340
// focus item in next month, which is currently out of view
@@ -349,22 +365,30 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
349365
const index = dates.indexOf(node);
350366

351367
if (!node) { return; }
368+
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', -1);
352369

353370
for (let i = index; i > 0; i--) {
354-
day = prevView ? node : dates[i - 1];
371+
day = prevView ? dates[i] : dates[i - 1];
372+
this.nextDate = day.date.date;
373+
if (day.date.isPrevMonth) {
374+
break;
375+
}
355376
if (this.isDayFocusable(day)) {
356377
day.nativeElement.focus();
357-
break;
378+
return;
358379
}
359380
}
360381

361382
// focus item in previous visible month
362-
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', -1);
363-
day = dates[index - 1];
364-
if (this.prevMonthView && ((day && day.date.isPrevMonth) || !day)) {
383+
if (this.prevMonthView) {
365384
dates = this.prevMonthView.dates.toArray();
366385
day = dates.find((item) => item.date.date.getTime() === this.nextDate.getTime());
367-
day.nativeElement.focus();
386+
387+
if (this.isDayFocusable(day)) {
388+
day.nativeElement.focus();
389+
return;
390+
}
391+
this.prevMonthView.focusPreviousDate(day.nativeElement);
368392
}
369393

370394
// focus item in previous month, which is currently out of view
@@ -390,26 +414,35 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
390414
const node = this.dates.find((date) => date.nativeElement === target);
391415
let dates = this.dates.toArray(),
392416
day: IgxDayItemComponent;
393-
const index = dates.indexOf(node);
417+
let index = dates.indexOf(node);
394418

395419
if (!node) { return; }
420+
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', 1);
396421

397422
// focus item in current month
398423
for (let i = index; i < dates.length - 1; i++) {
399-
day = nextView ? node : dates[i + 1];
424+
day = nextView ? dates[i] : dates[i + 1];
425+
this.nextDate = day.date.date;
426+
if (day.date.isNextMonth) {
427+
break;
428+
}
400429
if (this.isDayFocusable(day)) {
401430
day.nativeElement.focus();
402-
break;
431+
return;
403432
}
404433
}
405434

406435
// focus item in next visible month
407-
this.nextDate = this.calendarModel.timedelta(node.date.date, 'day', 1);
408-
day = dates[index + 1];
409-
if (this.nextMonthView && ((day && day.date.isNextMonth) || !day)) {
436+
if (this.nextMonthView) {
410437
dates = this.nextMonthView.dates.toArray();
411438
day = dates.find((item) => item.date.date.getTime() === this.nextDate.getTime());
412-
day.nativeElement.focus();
439+
index = dates.indexOf(day);
440+
441+
if (this.isDayFocusable(day)) {
442+
day.nativeElement.focus();
443+
return;
444+
}
445+
this.nextMonthView.focusNextDate(day.nativeElement);
413446
}
414447

415448
// focus item in next month, which is currently out of view

‎src/app/calendar/calendar.sample.ts

+9-5
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@ export class CalendarSampleComponent implements OnInit {
1212

1313
ngOnInit() {
1414
this.calendar.disabledDates = [{
15-
type: DateRangeType.Between, dateRange: [
16-
new Date(2019, 7, 2),
17-
new Date(2019, 7, 5)
15+
type: DateRangeType.Specific, dateRange: [
16+
new Date(2019, 5, 13),
17+
new Date(2019, 5, 27),
18+
new Date(2019, 5, 30),
19+
new Date(2019, 6, 1),
20+
new Date(2019, 5, 1),
21+
new Date(2019, 4, 31)
1822
]
1923
}];
2024

@@ -29,11 +33,11 @@ export class CalendarSampleComponent implements OnInit {
2933
}
3034

3135
public showHide() {
32-
this.calendar1.hideOutsideDays = !this.calendar1.hideOutsideDays;
36+
this.calendar.hideOutsideDays = !this.calendar.hideOutsideDays;
3337
}
3438

3539
public setMonthsViewNumber(args: HTMLInputElement) {
36-
this.calendar1.monthsViewNumber = parseInt(args.value, 10);
40+
this.calendar.monthsViewNumber = parseInt(args.value, 10);
3741
}
3842

3943
public select() {

0 commit comments

Comments
 (0)