Merge pull request #8377 from IgniteUI/ddincheva/calendarBugFixs

Changing month in the calendar should not throws an exception

Author: zdrawku

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

@@ -23,7 +23,7 @@ <h2 class="igx-calendar__header-date">
 </div>
 
 <div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" (swiperight)="previousMonth()"
-    (swipeleft)="nextMonth()">
+    (swipeleft)="nextMonth()" (pointerdown)="suppressBlur()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
             igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll"  [ngStyle]="{

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

@@ -419,7 +419,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     private _monthsViewNumber = 1;
-
     /**
      * @hidden
      * @internal
@@ -481,6 +480,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this.isKeydownTrigger = isKeydownTrigger;
     }
 
+    public suppressBlur() {
+        this.monthViews?.forEach(d => d.shouldResetDate = false);
+        if (this.daysView) { this.daysView.shouldResetDate = false; }
+    }
+
     /**
      * Change to next month
      *
@@ -540,6 +544,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         } else if (this.monthScrollDirection === ScrollMonth.NEXT) {
             this.nextMonthBtn.nativeElement.focus();
         }
+        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+            this.resetActiveDate();
+        }
 
         this.monthScrollDirection = ScrollMonth.NONE;
     }
@@ -765,6 +772,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public viewRendered(event) {
         if (event.fromState !== 'void') {
             this.activeViewChanged.emit(this.activeView);
+            if (this.activeView === 0) { this.resetActiveDate(); }
         }
     }
 

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

@@ -119,12 +119,12 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      */
     public nextMonthView: IgxDaysViewComponent;
 
-    /**
-     * @hidden
-     */
+    /** @hidden */
     public prevMonthView: IgxDaysViewComponent;
-    public _activeDate;
-    private shouldResetDate = true;
+    /** @hidden */
+    public shouldResetDate = true;
+    private _activeDate;
+
 
     /**
      * The default css class applied to the component.