fix(kit): CalendarRange shows actual defaultViewedMonth (#9009)

projects/kit/internal/primitive-calendar-range/primitive-calendar-range.component.ts

@@ -5,10 +5,12 @@ import {
     EventEmitter,
     Inject,
     Input,
+    OnChanges,
     OnInit,
     Optional,
     Output,
     Self,
+    SimpleChanges,
 } from '@angular/core';
 import {
     ALWAYS_FALSE_HANDLER,
@@ -37,7 +39,7 @@ import {takeUntil} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiDestroyService],
 })
-export class TuiPrimitiveCalendarRangeComponent implements OnInit {
+export class TuiPrimitiveCalendarRangeComponent implements OnInit, OnChanges {
     @Input()
     disabledItemHandler: TuiBooleanHandler<TuiDay> = ALWAYS_FALSE_HANDLER;
 
@@ -99,6 +101,18 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
     monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, offset) =>
         value.append({month: offset});
 
+    ngOnChanges({
+        defaultViewedMonthFirst,
+        defaultViewedMonthSecond,
+    }: SimpleChanges): void {
+        if (!this.value) {
+            this.updateViewedMonths(
+                defaultViewedMonthFirst?.currentValue,
+                defaultViewedMonthSecond?.currentValue,
+            );
+        }
+    }
+
     ngOnInit(): void {
         this.setInitialMonths();
     }
@@ -157,10 +171,18 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
         return month;
     }
 
-    private updateViewedMonths(): void {
-        this.userViewedMonthFirst =
-            this.value === null ? this.defaultViewedMonthFirst : this.value.from;
+    private updateViewedMonths(firstMonth?: TuiMonth, secondMonth?: TuiMonth): void {
+        if (this.value) {
+            this.userViewedMonthFirst = this.value.from;
+            this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
+        } else {
+            this.userViewedMonthSecond = this.updatedViewedMonthSecond(
+                secondMonth ?? this.userViewedMonthSecond,
+            );
 
-        this.userViewedMonthSecond = this.userViewedMonthFirst.append({month: 1});
+            this.userViewedMonthFirst = this.updatedViewedMonthFirst(
+                firstMonth ?? this.userViewedMonthFirst,
+            );
+        }
     }
 }

projects/kit/internal/primitive-calendar-range/test/primitive-calendar-range.component.spec.ts

@@ -1,7 +1,8 @@
 import {Component, ViewChild} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {TuiDay, TuiMonth} from '@taiga-ui/cdk';
+import {TuiDay, TuiDayRange, TuiMonth} from '@taiga-ui/cdk';
+import {TUI_DEFAULT_MARKER_HANDLER, TuiMarkerHandler} from '@taiga-ui/core';
 import {
     TuiPrimitiveCalendarRangeComponent,
     TuiPrimitiveCalendarRangeModule,
@@ -10,12 +11,24 @@ import {
 describe('PrimitiveRangeCalendar component', () => {
     @Component({
         template: `
-            <tui-primitive-calendar-range></tui-primitive-calendar-range>
+            <tui-primitive-calendar-range
+                [defaultViewedMonthFirst]="defaultViewedMonthFirst"
+                [defaultViewedMonthSecond]="defaultViewedMonthSecond"
+                [markerHandler]="markerHandler"
+                [value]="value"
+            ></tui-primitive-calendar-range>
         `,
     })
     class TestComponent {
         @ViewChild(TuiPrimitiveCalendarRangeComponent, {static: true})
         component!: TuiPrimitiveCalendarRangeComponent;
+
+        defaultViewedMonthFirst = TuiMonth.currentLocal();
+        defaultViewedMonthSecond = TuiMonth.currentLocal().append({month: 1});
+
+        value: TuiDayRange | null = null;
+
+        markerHandler: TuiMarkerHandler = TUI_DEFAULT_MARKER_HANDLER;
     }
 
     let fixture: ComponentFixture<TestComponent>;
@@ -141,4 +154,66 @@ describe('PrimitiveRangeCalendar component', () => {
             expect(component.cappedUserViewedMonthSecond).toBe(day);
         });
     });
+
+    describe('defaultViewedMonths updating', () => {
+        const defaultMonth = TuiMonth.currentLocal();
+        const updatedMonth = TuiMonth.currentLocal().append({
+            year: 1,
+        });
+
+        it('If other input updates after defaultViewedMonth was updated, new viewed months do not change', () => {
+            testComponent.defaultViewedMonthFirst = updatedMonth;
+            testComponent.defaultViewedMonthSecond = updatedMonth.append({
+                month: 1,
+            });
+            fixture.detectChanges();
+
+            testComponent.markerHandler = (day: TuiDay) =>
+                day.day % 2 === 0 ? ['first'] : ['second'];
+            fixture.detectChanges();
+
+            expect(component.userViewedMonthFirst.toString()).toBe(
+                updatedMonth.toString(),
+            );
+            expect(component.userViewedMonthSecond.toString()).toBe(
+                updatedMonth.append({month: 1}).toString(),
+            );
+        });
+
+        it('If value not selected, updating defaultViewedMonth change viewed months', () => {
+            testComponent.defaultViewedMonthFirst = updatedMonth;
+            testComponent.defaultViewedMonthSecond = updatedMonth.append({
+                month: 1,
+            });
+            fixture.detectChanges();
+
+            expect(component.userViewedMonthFirst.toString()).toBe(
+                updatedMonth.toString(),
+            );
+            expect(component.userViewedMonthSecond.toString()).toBe(
+                updatedMonth.append({month: 1}).toString(),
+            );
+        });
+
+        it('If value selected, updating defaultViewedMonth do not change viewed month', () => {
+            testComponent.value = new TuiDayRange(
+                new TuiDay(2024, 9, 25),
+                new TuiDay(2024, 9, 25),
+            );
+            fixture.detectChanges();
+
+            testComponent.defaultViewedMonthFirst = updatedMonth;
+            testComponent.defaultViewedMonthSecond = updatedMonth.append({
+                month: 1,
+            });
+            fixture.detectChanges();
+
+            expect(component.userViewedMonthFirst.toString()).toBe(
+                defaultMonth.toString(),
+            );
+            expect(component.userViewedMonthSecond.toString()).toBe(
+                defaultMonth.append({month: 1}).toString(),
+            );
+        });
+    });
 });