fix(YearsView): navigate correctly in the years view #6275

Author: ddincheva

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

@@ -489,10 +489,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public nextMonth(isKeydownTrigger = false) {
         if (isKeydownTrigger && this.animationAction === 'prev') { return; }
+        this.isKeydownTrigger = isKeydownTrigger;
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
-        this.isKeydownTrigger = isKeydownTrigger;
     }
 
     /**
@@ -553,7 +553,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         requestAnimationFrame(() => {
             if (this.dacadeView) {
                 this.dacadeView.date = args;
-                this.dacadeView.el.nativeElement.focus();
+                this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus();
             }
         });
     }
@@ -568,7 +568,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         requestAnimationFrame(() => {
             if (this.dacadeView) {
                 this.dacadeView.date = args;
-                this.dacadeView.el.nativeElement.focus();
+                this.dacadeView.calendarDir.find(date => date.isCurrentYear).nativeElement.focus();
             }
         });
     }
@@ -729,6 +729,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
              (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
             this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
+        if (!this.isKeydownTrigger) {
+            this.resetActiveDate();
+        }
 
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
             this.scrollMonth$.next();
@@ -753,7 +756,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             this.callback(this.nextDate);
         }
         this.animationAction = ScrollMonth.NONE;
-        this.resetActiveDate();
     }
 
     /**

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

@@ -58,6 +58,12 @@ export class IgxCalendarYearDirective {
         return this.date.getFullYear() === this.value.getFullYear();
     }
 
+    public get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+
+    constructor(public elementRef: ElementRef) {}
+
     @HostListener('click')
     public onClick() {
         this.onYearSelection.emit(this.value);

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

@@ -1,7 +1,8 @@
-import { Component, Output, EventEmitter, Input, HostBinding, HostListener, ElementRef, Injectable} from '@angular/core';
+import { Component, Output, EventEmitter, Input, HostBinding, HostListener, ElementRef, Injectable, ViewChildren, QueryList} from '@angular/core';
 import { range, Calendar } from '../calendar';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+import { IgxCalendarYearDirective } from '../calendar.directives';
 
 let NEXT_ID = 0;
 
@@ -134,6 +135,13 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
     @HostBinding('class.igx-calendar')
     public styleClass = true;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ViewChildren(IgxCalendarYearDirective, { read: IgxCalendarYearDirective })
+    public calendarDir: QueryList<IgxCalendarYearDirective>;
+
     /**
      * Returns an array of date objects which are then used to properly
      * render the years.
@@ -268,6 +276,7 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
         event.stopPropagation();
 
         this.generateYearRange(1);
+        this.calendarDir.find(date => date.isCurrentYear).nativeElement.nextElementSibling.focus();
     }
 
     /**
@@ -279,6 +288,7 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
         event.stopPropagation();
 
         this.generateYearRange(-1);
+        this.calendarDir.find(date => date.isCurrentYear).nativeElement.previousElementSibling.focus();
     }
 
     /**