From 1f6cbb477ff1d12c79ee625ede4538bb87f385e9 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Wed, 14 Aug 2024 20:05:58 +0300
Subject: [PATCH] fix(kit): `CalendarRange` not update `selectedActivePeriod`,
 when `value` updates

---
 .../calendar-range.component.ts               | 12 +++++--
 .../test/calendar-range.component.spec.ts     | 36 ++++++++-----------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
index 2cd478592123..95f140a2e137 100644
--- a/projects/kit/components/calendar-range/calendar-range.component.ts
+++ b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -1,5 +1,5 @@
 import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
-import type {OnChanges, OnInit} from '@angular/core';
+import type {OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -87,12 +87,14 @@ export class TuiCalendarRange implements OnInit, OnChanges {
         inject<Observable<TuiDayRange | null>>(TUI_CALENDAR_DATE_STREAM, {optional: true})
             ?.pipe(tuiWatch(this.cdr), takeUntilDestroyed())
             .subscribe((value) => {
+                this.resetSelectedActivePeriod(value);
                 this.value = value;
             });
     }
 
-    public ngOnChanges(): void {
+    public ngOnChanges({value}: SimpleChanges): void {
         this.defaultViewedMonth = this.value?.from || this.defaultViewedMonth;
+        this.resetSelectedActivePeriod(value?.currentValue);
     }
 
     public ngOnInit(): void {
@@ -227,6 +229,12 @@ export class TuiCalendarRange implements OnInit, OnChanges {
         };
     }
 
+    private resetSelectedActivePeriod(value: TuiDayRange | null): void {
+        if (value?.toString() !== this.selectedActivePeriod?.range.toString()) {
+            this.selectedActivePeriod = null;
+        }
+    }
+
     private isDisabledItem(
         disabledItemHandler: TuiBooleanHandler<TuiDay>,
         value: TuiDayRange | null,
diff --git a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts
index 99ab8e5d3763..a56c8d1c7945 100644
--- a/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts
+++ b/projects/kit/components/calendar-range/test/calendar-range.component.spec.ts
@@ -245,36 +245,30 @@ describe('rangeCalendarComponent', () => {
             expect(component.defaultViewedMonth).toEqual(minDate);
         });
 
-        it('isItemActive returns true when value is set to today after being changed to yesterday', () => {
+        it('when value updates, displays appropriate checkbox', () => {
             const today = TuiDay.currentLocal();
-            const yesterday = today.append({day: -1});
+            const yesterday = TuiDay.currentLocal().append({day: -1});
+            const previousMonth = today.append({month: -1});
 
-            testComponent.value = new TuiDayRange(today, today);
+            testComponent.items = [
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '1'),
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, yesterday), '2'),
+            ];
             fixture.detectChanges();
 
-            expect(
-                component['isItemActive'](
-                    new TuiDayRangePeriod(new TuiDayRange(today, today), 'Today'),
-                ),
-            ).toBe(true);
-
-            testComponent.value = new TuiDayRange(yesterday, yesterday);
+            component['onItemSelect'](component.items[1]);
             fixture.detectChanges();
 
-            expect(
-                component['isItemActive'](
-                    new TuiDayRangePeriod(new TuiDayRange(today, today), 'Today'),
-                ),
-            ).toBe(false);
+            const items = getItems();
 
-            testComponent.value = new TuiDayRange(today, today);
+            expect(items[0].nativeElement.contains(getCheckmark())).toBe(false);
+            expect(items[1].nativeElement.contains(getCheckmark())).toBe(true);
+
+            testComponent.value = new TuiDayRange(previousMonth, today);
             fixture.detectChanges();
 
-            expect(
-                component['isItemActive'](
-                    new TuiDayRangePeriod(new TuiDayRange(today, today), 'Today'),
-                ),
-            ).toBe(true);
+            expect(items[0].nativeElement.contains(getCheckmark())).toBe(true);
+            expect(items[1].nativeElement.contains(getCheckmark())).toBe(false);
         });
     });