fix(kit): CalendarRange shows end of range (#8774)

taiga-family · Sep 2, 2024 · 6604fd6 · 6604fd6
1 parent e5477c4
commit 6604fd6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts b/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
@@ -168,6 +168,17 @@ test.describe('InputDateRange', () => {
                 '07-item-and-calendar-interactions.png',
             );
         });
+
+        test('Calendar shows end of period, when selected any range', async ({page}) => {
+            await tuiGoto(page, 'components/input-date-range/API?items$=1');
+
+            await inputDateRange.textfield.click();
+            await inputDateRange.selectItem(0);
+
+            await inputDateRange.textfield.click();
+
+            await expect(example).toHaveScreenshot('09-calendar-shows-end-of-period.png');
+        });
     });
 
     test.describe('Examples', () => {

diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -114,7 +114,9 @@ export class TuiCalendarRange implements OnInit, OnChanges {
     }
 
     public ngOnChanges(): void {
-        this.defaultViewedMonth = this.value?.from || this.defaultViewedMonth;
+        this.defaultViewedMonth =
+            (this.items.length ? this.value?.to : this.value?.from) ||
+            this.defaultViewedMonth;
     }
 
     public ngOnInit(): void {