fix(kit): CalendarRange not update selectedActivePeriod, when `va…

…lue` updates
taiga-family · Aug 14, 2024 · 3b82ab0 · 3b82ab0
1 parent 8b00807
commit 3b82ab0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git 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,23 @@ export class TuiCalendarRange implements OnInit, OnChanges {
         inject<Observable<TuiDayRange | null>>(TUI_CALENDAR_DATE_STREAM, {optional: true})
             ?.pipe(tuiWatch(this.cdr), takeUntilDestroyed())
             .subscribe((value) => {
+                if (value?.toString() !== this.selectedActivePeriod?.range?.toString()) {
+                    this.selectedActivePeriod = null;
+                }
+
                 this.value = value;
             });
     }
 
-    public ngOnChanges(): void {
+    public ngOnChanges({value}: SimpleChanges): void {
         this.defaultViewedMonth = this.value?.from || this.defaultViewedMonth;
+
+        if (
+            (value?.currentValue as TuiDayRange)?.toString() !==
+            this.selectedActivePeriod?.range.toString()
+        ) {
+            this.selectedActivePeriod = null;
+        }
     }
 
     public ngOnInit(): void {

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
@@ -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);
         });
     });