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

---
 .../calendar-range.component.ts               | 19 +++++++++++++-
 .../test/range-calendar.component.spec.ts     | 26 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
index e6ac62dcbd770..a959c38eea5f1 100644
--- a/projects/kit/components/calendar-range/calendar-range.component.ts
+++ b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -6,9 +6,11 @@ import {
     HostListener,
     Inject,
     Input,
+    OnChanges,
     Optional,
     Output,
     Self,
+    SimpleChanges,
 } from '@angular/core';
 import {
     ALWAYS_FALSE_HANDLER,
@@ -47,7 +49,9 @@ import {takeUntil} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiDestroyService],
 })
-export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay> {
+export class TuiCalendarRangeComponent
+    implements TuiWithOptionalMinMax<TuiDay>, OnChanges
+{
     @Input()
     defaultViewedMonth: TuiMonth = TuiMonth.currentLocal();
 
@@ -107,6 +111,10 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         }
 
         valueChanges.pipe(tuiWatch(cdr), takeUntil(destroy$)).subscribe(value => {
+            if (value?.toString() !== this.selectedActivePeriod?.range?.toString()) {
+                this.selectedActivePeriod = null;
+            }
+
             this.value = value;
         });
     }
@@ -121,6 +129,15 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.value = this.previousValue;
     }
 
+    ngOnChanges({value}: SimpleChanges): void {
+        if (
+            value?.currentValue?.toString() !==
+            this.selectedActivePeriod?.range.toString()
+        ) {
+            this.selectedActivePeriod = null;
+        }
+    }
+
     readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) =>
         value.append({month});
 
diff --git a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts
index b6d5548dde2c9..df31f25ea2eb3 100644
--- a/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts
+++ b/projects/kit/components/calendar-range/test/range-calendar.component.spec.ts
@@ -226,6 +226,32 @@ describe('rangeCalendarComponent', () => {
             expect(items[0].nativeElement.contains(getCheckmark())).toBe(false);
             expect(items[1].nativeElement.contains(getCheckmark())).toBe(true);
         });
+
+        it('when value updates, displays appropriate checkbox', () => {
+            const today = TuiDay.currentLocal();
+            const yesterday = TuiDay.currentLocal().append({day: -1});
+            const previousMonth = today.append({month: -1});
+
+            testComponent.items = [
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '1'),
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, yesterday), '2'),
+            ];
+            fixture.detectChanges();
+
+            component.onItemSelect(component.items[1]);
+            fixture.detectChanges();
+
+            const items = getItems();
+
+            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(items[0].nativeElement.contains(getCheckmark())).toBe(true);
+            expect(items[1].nativeElement.contains(getCheckmark())).toBe(false);
+        });
     });
 
     function getCalendar(): DebugElement | null {