fix(kit): fix CalendarRange switch month with maxLength

projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts

@@ -0,0 +1,30 @@
+import {
+    TuiCalendarRangePO,
+    TuiDocumentationPagePO,
+    tuiGoto,
+} from '@demo-playwright/utils';
+import {expect, Locator, test} from '@playwright/test';
+
+const {describe, beforeEach} = test;
+
+describe('CalendarRange', () => {
+    describe('API', () => {
+        let documentationPage: TuiDocumentationPagePO;
+        let example: Locator;
+        let calendarRange: TuiCalendarRangePO;
+
+        beforeEach(({page}) => {
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+            calendarRange = new TuiCalendarRangePO(example.locator('tui-calendar-range'));
+        });
+
+        test('When click on right calendar, months not switch', async ({page}) => {
+            await tuiGoto(page, 'components/calendar-range/API?maxLength$=0');
+            await calendarRange.clickRightCalendar();
+
+            await documentationPage.prepareApiPageBeforeScreenshot();
+            await expect(page).toHaveScreenshot('calendar-range-max-length-click.png');
+        });
+    });
+});

projects/demo-playwright/utils/page-objects/calendar-range.po.ts

@@ -0,0 +1,12 @@
+import {Locator} from '@playwright/test';
+
+export class TuiCalendarRangePO {
+    constructor(private readonly host: Locator) {}
+
+    async clickRightCalendar(): Promise<void> {
+        return this.host
+            .locator('[automation-id="tui-calendar__calendar"]')
+            .last()
+            .click();
+    }
+}

projects/demo-playwright/utils/page-objects/index.ts

@@ -1,4 +1,5 @@
 export * from './calendar.po';
+export * from './calendar-range.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-grouped.po';

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

@@ -138,7 +138,7 @@ export class TuiPrimitiveCalendarRangeComponent implements OnInit {
             return this.max;
         }
 
-        if (month.monthBefore(this.min)) {
+        if (month.monthSameOrBefore(this.min)) {
             return this.min.append({month: 1});
         }
 

projects/kit/internal/primitive-calendar-range/primitive-calendar-range.template.html

@@ -18,7 +18,7 @@
     [max]="max"
     [min]="min"
     [minViewedMonth]="cappedUserViewedMonthFirst | tuiMapper: monthOffset : 1"
-    [month]="userViewedMonthSecond.monthSameOrBefore(min) ? (min | tuiMapper: monthOffset : 1) : userViewedMonthSecond"
+    [month]="userViewedMonthSecond"
     [showAdjacent]="false"
     [value]="value"
     [(hoveredItem)]="hoveredItem"

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

@@ -96,6 +96,15 @@ describe('PrimitiveRangeCalendar component', () => {
             component.ngOnInit();
             expect(component.userViewedMonthSecond).toEqual(minDate.append({month: 1}));
         });
+
+        it('When min later than given month, return next month after min', () => {
+            const minDate = TuiDay.currentLocal().append({month: 1});
+
+            component.min = minDate;
+            component.ngOnInit();
+
+            expect(component.userViewedMonthSecond).toEqual(minDate.append({month: 1}));
+        });
     });
 
     describe('cappedUserViewedMonthSecond', () => {