Merge branch '10.2.x' into mpopov/fix-for-8483--dark-action-strip

Author: simeonoff

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

@@ -156,10 +156,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;
     }
 
     /**
@@ -175,6 +181,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Sets the date that will be presented in the default view when the component renders.
      */
     public set viewDate(value: Date) {
+        if (this._viewDate) {
+            this.selectedDatesWithoutFocus = value;
+        }
         const date = this.getDateOnly(value).setDate(1);
         this._viewDate = new Date(date);
     }
@@ -380,6 +389,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public selectedDates;
 
+    /**
+     * @hidden
+     */
+    private selectedDatesWithoutFocus;
+
     /**
      * @hidden
      */

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

@@ -174,7 +174,8 @@ describe('IgxCalendar - ', () => {
         configureTestSuite();
         beforeAll(async(() => {
             TestBed.configureTestingModule({
-                declarations: [IgxCalendarSampleComponent, IgxCalendarRangeComponent, IgxCalendarDisabledSpecialDatesComponent],
+                declarations: [IgxCalendarSampleComponent, IgxCalendarRangeComponent, IgxCalendarDisabledSpecialDatesComponent,
+                IgxCalendarValueComponent],
                 imports: [IgxCalendarModule, FormsModule, NoopAnimationsModule]
             }).compileComponents();
         }));
@@ -291,6 +292,27 @@ describe('IgxCalendar - ', () => {
                 expect(bodyMonth.nativeElement.textContent.trim()).toMatch('8');
             });
 
+            it('Should show right month when value is set', () => {
+                fixture = TestBed.createComponent(IgxCalendarValueComponent);
+                fixture.detectChanges();
+                calendar = fixture.componentInstance.calendar;
+
+                expect(calendar.weekStart).toEqual(WEEKDAYS.SUNDAY);
+                expect(calendar.selection).toEqual('single');
+                expect(calendar.viewDate.getMonth()).toEqual(calendar.value.getMonth());
+
+                const date = new Date(2020, 8, 28);
+                calendar.viewDate = date;
+                fixture.detectChanges();
+
+                expect(calendar.viewDate.getMonth()).toEqual(date.getMonth());
+
+                calendar.value = new Date(2020, 9, 15);
+                fixture.detectChanges();
+
+                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();
@@ -1998,6 +2020,16 @@ export class IgxCalendarDisabledSpecialDatesComponent {
     @ViewChild(IgxCalendarComponent, { static: true }) public calendar: IgxCalendarComponent;
 }
 
+@Component({
+    template: `
+        <igx-calendar [value]="value"></igx-calendar>
+    `
+})
+export class IgxCalendarValueComponent {
+    public value = new Date(2020, 7, 13);
+    @ViewChild(IgxCalendarComponent, { static: true }) public calendar: IgxCalendarComponent;
+}
+
 class DateTester {
     // tests whether a date is disabled or not
     static testDatesAvailability(dates: IgxDayItemComponent[], disabled: boolean) {