fix(Calendar): reset the date only when the days view looses focus #6275

Author: ddincheva

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

@@ -60,7 +60,8 @@ <h2 class="igx-calendar__header-date">
                 [hideOutsideDays]="hideOutsideDays"
                 [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
-                (onDateSelection)="childClicked($event)">
+                (onDateSelection)="childClicked($event)"
+                (monthsViewBlur)="resetActiveDate()">
         </igx-days-view>
     </div>
 </div>

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

@@ -936,19 +936,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         }
     }
 
-    @HostListener('document:click')
-    public outSideClick() {
-        this.resetActiveDate();
-    }
-
-    @HostListener('keydown.tab', ['$event'])
-    @HostListener('keydown.shift.tab', ['$event'])
-    public onTab(event) {
-        if (event.target.tagName.toLowerCase() === 'igx-day-item') {
-            requestAnimationFrame(() => this.resetActiveDate());
-        }
-    }
-
     /**
      * @hidden
      * @internal

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

@@ -76,7 +76,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     }
 
     public get activeDate() {
-        return this._activeDate;
+        return this._activeDate ? this._activeDate : this.viewDate.toLocaleDateString();
     }
 
     /**
@@ -97,6 +97,12 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @Output()
     public activeDateChange = new EventEmitter<string>();
 
+    /**
+     * @hidden
+     */
+    @Output()
+    public monthsViewBlur = new EventEmitter<any>();
+
     /**
      * @hidden
      */
@@ -118,6 +124,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      */
     public prevMonthView: IgxDaysViewComponent;
     public _activeDate;
+    private shouldResetDate = true;
 
     /**
      * The default css class applied to the component.
@@ -127,6 +134,34 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @HostBinding('class.igx-calendar')
     public styleClass = true;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('focusout')
+    public resetActiveMonth() {
+        if (this.shouldResetDate) {
+            const date = this.dates.find(day => day.selected && day.isCurrentMonth)
+            || this.dates.find(day => day.isToday && day.isCurrentMonth) || this.dates.find(d => d.isFocusable);
+            if (date) { this.activeDate = date.date.date.toLocaleDateString(); }
+            this.monthsViewBlur.emit();
+        }
+        this.shouldResetDate = true;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostListener('keydown.pagedown')
+    @HostListener('keydown.pageup')
+    @HostListener('keydown.shift.pagedown')
+    @HostListener('keydown.shift.pageup')
+    @HostListener('pointerdown')
+    public pointerDown() {
+        this.shouldResetDate = false;
+    }
+
     /**
      * @hidden
      */
@@ -389,6 +424,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownArrow(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
+        this.shouldResetDate = false;
         this.daysNavService.focusNextDate(event.target as HTMLElement, event.key);
     }
 
@@ -399,6 +435,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownHome(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
+        this.shouldResetDate = false;
         this.getFirstMonthView().daysNavService.focusHomeDate();
     }
 
@@ -409,6 +446,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownEnd(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
+        this.shouldResetDate = false;
         this.getLastMonthView().daysNavService.focusEndDate();
     }
 }