fix(calendar): show right month when value is set for 9.1.x #8173

Author: MonikaKirkova

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

@@ -150,10 +150,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public set value(value: Date | Date[]) {
         if (!value || !!value && (value as Date[]).length === 0) {
+            this.selectedDatesWithoutFocus = new Date();
             return;
         }
-
+        if (!this.selectedDatesWithoutFocus) {
+            const valueDate = value[0] ? Math.min.apply(null, value) : value;
+            const date = this.getDateOnly(new Date(valueDate)).setDate(1);
+            this.viewDate = new Date(date);
+        }
         this.selectDate(value);
+        this.selectedDatesWithoutFocus = value;
     }
 
     /**
@@ -345,6 +351,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public selectedDates;
 
+    /**
+     * @hidden
+     */
+    private selectedDatesWithoutFocus;
+
     /**
      * @hidden
      */

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

@@ -289,6 +289,22 @@ describe('IgxCalendar - ', () => {
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('8');
             });
 
+            it('Should show right month when value is set', () => {
+                expect(calendar.weekStart).toEqual(WEEKDAYS.SUNDAY);
+                expect(calendar.selection).toEqual('single');
+
+                const date = new Date(2020, 8, 28);
+                calendar.value = date;
+                fixture.detectChanges();
+                expect(
+                    (fixture.componentInstance.model as Date).toDateString()
+                ).toMatch(date.toDateString());
+                expect((calendar.value as Date).toDateString()).toMatch(
+                    date.toDateString()
+                );
+                expect(calendar.viewDate.getMonth()).toEqual(date.getMonth());
+            });
+
             it('Should properly set locale', () => {
                 fixture.componentInstance.viewDate = new Date(2018, 8, 17);
                 fixture.componentInstance.model = new Date();