fix(kit): CalendarRange switch months if any input updated, when da…

…te range selected (#9665)

projects/kit/components/calendar-range/calendar-range.component.ts

@@ -49,14 +49,14 @@ export class TuiCalendarRange implements OnInit, OnChanges {
      * @deprecated use `item`
      */
     private selectedPeriod: TuiDayRangePeriod | null = null;
-    protected readonly otherDateText$ = inject(TUI_OTHER_DATE_TEXT);
-    protected readonly icons = inject(TUI_COMMON_ICONS);
+
     protected previousValue: TuiDayRange | null = null;
     protected hoveredItem: TuiDay | null = null;
-    protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
+    protected month: TuiMonth = TuiMonth.currentLocal();
 
-    @Input()
-    public defaultViewedMonth: TuiMonth = TuiMonth.currentLocal();
+    protected readonly otherDateText$ = inject(TUI_OTHER_DATE_TEXT);
+    protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
 
     @Input()
     public disabledItemHandler: TuiBooleanHandler<TuiDay> = TUI_FALSE_HANDLER;
@@ -100,6 +100,17 @@ export class TuiCalendarRange implements OnInit, OnChanges {
             });
     }
 
+    @Input()
+    public set defaultViewedMonth(month: TuiMonth) {
+        if (!this.value) {
+            this.month = month;
+        }
+    }
+
+    public get defaultViewedMonth(): TuiMonth {
+        return this.month;
+    }
+
     /**
      * @deprecated use `item`
      */
@@ -115,7 +126,9 @@ export class TuiCalendarRange implements OnInit, OnChanges {
     }
 
     public ngOnChanges(): void {
-        this.initDefaultViewedMonth();
+        if (!this.value) {
+            this.initDefaultViewedMonth();
+        }
     }
 
     public ngOnInit(): void {
@@ -240,13 +253,11 @@ export class TuiCalendarRange implements OnInit, OnChanges {
 
     private initDefaultViewedMonth(): void {
         if (this.value) {
-            this.defaultViewedMonth = this.items.length ? this.value.to : this.value.from;
-        } else if (this.max && this.defaultViewedMonth.monthSameOrAfter(this.max)) {
-            this.defaultViewedMonth = this.items.length
-                ? this.max
-                : this.max.append({month: -1});
-        } else if (this.min && this.defaultViewedMonth.monthSameOrBefore(this.min)) {
-            this.defaultViewedMonth = this.min;
+            this.month = this.items.length ? this.value.to : this.value.from;
+        } else if (this.max && this.month.monthSameOrAfter(this.max)) {
+            this.month = this.items.length ? this.max : this.max.append({month: -1});
+        } else if (this.min && this.month.monthSameOrBefore(this.min)) {
+            this.month = this.min;
         }
     }
 

projects/kit/components/calendar-range/test/calendar-range.component.spec.ts

@@ -18,6 +18,7 @@ import {
     TuiMonth,
     TuiYear,
 } from '@taiga-ui/cdk';
+import type {TuiMarkerHandler} from '@taiga-ui/core';
 import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
 import {
     TUI_CALENDAR_DATE_STREAM,
@@ -35,7 +36,9 @@ describe('rangeCalendarComponent', () => {
         imports: [TuiCalendarRange],
         template: `
             <tui-calendar-range
+                [defaultViewedMonth]="defaultViewedMonth"
                 [items]="items"
+                [markerHandler]="markerHandler"
                 [max]="max"
                 [min]="min"
                 [value]="value"
@@ -71,6 +74,10 @@ describe('rangeCalendarComponent', () => {
 
         public value: TuiDayRange | null = null;
 
+        public defaultViewedMonth = TuiMonth.currentLocal();
+
+        public markerHandler: TuiMarkerHandler | null = null;
+
         public onRangeChange(range: TuiDayRange | null): void {
             this.control.setValue(range);
         }
@@ -86,12 +93,17 @@ describe('rangeCalendarComponent', () => {
             imports: [Test],
             providers: [NG_EVENT_PLUGINS],
         });
+
         await TestBed.compileComponents();
+
         fixture = TestBed.createComponent(Test);
         pageObject = new TuiPageObject(fixture);
+
         testComponent = fixture.componentInstance;
         fixture.detectChanges();
+
         component = testComponent.component;
+
         await fixture.whenStable();
         fixture.detectChanges();
     });
@@ -309,6 +321,49 @@ describe('rangeCalendarComponent', () => {
         });
     });
 
+    describe('defaultViewedMonth updating', () => {
+        beforeEach(() => {
+            testComponent.items = [];
+            fixture.detectChanges();
+        });
+
+        const defaultMonth = TuiMonth.currentLocal();
+        const updatedMonth = defaultMonth.append({
+            year: 1,
+        });
+
+        it('if other input updates after defaultViewedMonth was updated, new viewed months do not change', () => {
+            testComponent.defaultViewedMonth = updatedMonth;
+            fixture.detectChanges();
+
+            testComponent.markerHandler = (day: TuiDay) =>
+                day.day % 2 === 0 ? ['first'] : ['second'];
+            fixture.detectChanges();
+
+            expect(component.defaultViewedMonth.toString()).toBe(updatedMonth.toString());
+        });
+
+        it('if value not selected, updating defaultViewedMonth change viewed months', () => {
+            testComponent.defaultViewedMonth = updatedMonth;
+            fixture.detectChanges();
+
+            expect(component.defaultViewedMonth.toString()).toBe(updatedMonth.toString());
+        });
+
+        it('if value selected, updating defaultViewedMonth do not change viewed month', () => {
+            testComponent.value = new TuiDayRange(
+                TuiDay.currentLocal().append({month: 1}),
+                TuiDay.currentLocal().append({month: 1}),
+            );
+            fixture.detectChanges();
+
+            testComponent.defaultViewedMonth = updatedMonth;
+            fixture.detectChanges();
+
+            expect(component.defaultViewedMonth.toString()).toBe(defaultMonth.toString());
+        });
+    });
+
     function getCalendar(): DebugElement | null {
         return pageObject.getByAutomationId('tui-calendar-range__calendar');
     }