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

…lue` updates
taiga-family · Aug 14, 2024 · 873dd26 · 873dd26
1 parent fb150f8
commit 873dd26
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git 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,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         }
 
         valueChanges.pipe(tuiWatch(cdr), takeUntil(destroy$)).subscribe(value => {
+            this.resetSelectedActivePeriod(value);
             this.value = value;
         });
     }
@@ -121,6 +126,10 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         this.value = this.previousValue;
     }
 
+    ngOnChanges({value}: SimpleChanges): void {
+        this.resetSelectedActivePeriod(value?.currentValue);
+    }
+
     readonly monthOffset: TuiTypedMapper<[TuiMonth, number], TuiMonth> = (value, month) =>
         value.append({month});
 
@@ -247,6 +256,12 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         };
     }
 
+    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/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 {