feat(Calendar): recalc activeDate when views are changed #6275

Author: ddincheva

Diff for: projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -651,7 +651,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                 this.selectRange(value, true);
                 break;
         }
-        this.resetActiveDate();
     }
 
     /**

Diff for: projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -45,12 +45,12 @@ <h2 class="igx-calendar__header-date">
 
     <div style="display: flex"
         [@animateChange]="animationAction"
-        (@animateChange.done)="animationDone($event)" (focusout)="resetActiveDate()">
+        (@animateChange.done)="animationDone($event)" >
         <igx-days-view *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;" [changeDaysView]="true" #days
                 [selection]="selection"
                 [locale]="locale"
                 [value]="value"
-                [activeDate]="activeDate"
+                [(activeDate)]="activeDate"
                 [viewDate]="i | IgxGetViewDate:viewDate"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
@@ -60,8 +60,7 @@ <h2 class="igx-calendar__header-date">
                 [hideOutsideDays]="hideOutsideDays"
                 [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
-                (onDateSelection)="childClicked($event)"
-                (activeDateChange)="activeDate = $event">
+                (onDateSelection)="childClicked($event)">
         </igx-days-view>
     </div>
 </div>

Diff for: projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -762,6 +762,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             this.callback(this.nextDate);
         }
         this.animationAction = ScrollMonth.NONE;
+        this.resetActiveDate();
     }
 
     /**
@@ -778,11 +779,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    public resetActiveDate(param?) {
+    public resetActiveDate() {
         if (!this.monthViews) { return; }
         let dates = [];
         this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray());  });
-        const date = dates.find(day => day.selected) || dates.find(day => day.isToday) || dates.find(d => d.isFocusable);
+        const date = dates.find(day => day.selected && day.isCurrentMonth) || dates.find(day => day.isToday && day.isCurrentMonth)
+            || dates.find(d => d.isFocusable);
         if (date) {
             this.activeDate = date.date.date.toLocaleDateString();
         }
@@ -801,7 +803,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
             return;
         }
 
-
         const isPageDown = event.key === 'PageDown';
         const step = isPageDown ? 1 : -1;
         let monthView = this.daysView as IgxDaysViewComponent;
@@ -942,6 +943,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         }
     }
 
+    @HostListener('focusout', ['$event'])
+    public onPointerDown(event) {
+/*         if (event.path.contains('igx-days-view')) {
+            return;
+        } */
+        console.log(event);
+    }
+
     /**
      * @hidden
      * @internal