fix(kit): CalendarRange should not distinguish ranges with same dates and different names

projects/kit/components/calendar-range/calendar-range.component.ts

@@ -80,6 +80,8 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
     previousValue: TuiDayRange | null = null;
 
+    selectedActivePeriod: TuiDayRangePeriod | null = null;
+
     readonly maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
 
     get computedMin(): TuiDay {
@@ -165,6 +167,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         const {value} = this;
 
         this.previousValue = value;
+        this.selectedActivePeriod = null;
 
         if (value === null || !value.isSingleDay) {
             this.value = new TuiDayRange(day, day);
@@ -176,14 +179,16 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
     }
 
     onItemSelect(item: TuiDayRangePeriod | string): void {
-        if (typeof item !== 'string') {
+        if (!tuiIsString(item)) {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.selectedActivePeriod = item;
 
             return;
         }
 
         if (this.activePeriod !== null) {
             this.updateValue(null);
+            this.selectedActivePeriod = null;
         }
     }
 
@@ -194,15 +199,17 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
     private get activePeriod(): TuiDayRangePeriod | null {
         return (
-            this.items.find(item =>
+            this.selectedActivePeriod ??
+            (this.items.find(item =>
                 tuiNullableSame<TuiDayRange>(
                     this.value,
                     item.range,
                     (a, b) =>
                         a.from.daySame(b.from.dayLimit(this.min, this.max)) &&
                         a.to.daySame(b.to.dayLimit(this.min, this.max)),
                 ),
-            ) || null
+            ) ||
+                null)
         );
     }
 

projects/kit/components/calendar-range/test/range-calendar.component.spec.ts

@@ -29,6 +29,7 @@ describe('rangeCalendarComponent', () => {
                     [items]="items"
                     [max]="max"
                     [min]="min"
+                    [value]="value"
                     (valueChange)="onRangeChange($event)"
                 ></tui-calendar-range>
             </tui-root>
@@ -58,6 +59,8 @@ describe('rangeCalendarComponent', () => {
 
         max = TUI_LAST_DAY;
 
+        value: TuiDayRange | null = null;
+
         onRangeChange(range: TuiDayRange): void {
             this.control.setValue(range);
         }
@@ -110,6 +113,17 @@ describe('rangeCalendarComponent', () => {
             expect(items.length).toBe(7);
         });
 
+        it('If the value fit any range, check the box next to appropriate range', () => {
+            const today = TuiDay.currentLocal();
+
+            testComponent.value = new TuiDayRange(today, today);
+            fixture.detectChanges();
+
+            const items = getItems();
+
+            expect(items[1].nativeElement.contains(getCheckmark())).toBe(true);
+        });
+
         it('If the value does not fit any range, check the box next to "Other date..."', () => {
             expect(getItems()[6].nativeElement.contains(getCheckmark())).toBe(true);
         });
@@ -126,6 +140,7 @@ describe('rangeCalendarComponent', () => {
 
             testComponent.min = min;
             fixture.detectChanges();
+
             component.onItemSelect(component.items[5]);
             fixture.detectChanges();
 
@@ -170,6 +185,47 @@ describe('rangeCalendarComponent', () => {
             expect(items[0].nativeElement.textContent.trim()).toBe(title);
             expect(items[1].nativeElement.textContent.trim()).toBe('Other date...');
         });
+
+        it('When redefining intervals, displays appropriate checkbox', () => {
+            const today = TuiDay.currentLocal();
+            const previousMonth = today.append({month: -1});
+            const title = 'New interval';
+
+            component.onItemSelect(component.items[0]);
+            fixture.detectChanges();
+
+            testComponent.items = [
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), title),
+                ...testComponent.items,
+            ];
+            fixture.detectChanges();
+
+            const items = getItems();
+
+            expect(items[0].nativeElement.textContent.trim()).toBe(title);
+
+            expect(items[0].nativeElement.contains(getCheckmark())).toBe(false);
+            expect(items[1].nativeElement.contains(getCheckmark())).toBe(true);
+        });
+
+        it('If there are ranges with same range dates, displays appropriate checkbox when switching between them', () => {
+            const today = TuiDay.currentLocal();
+            const previousMonth = today.append({month: -1});
+
+            testComponent.items = [
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '1'),
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), '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);
+        });
     });
 
     function getCalendar(): DebugElement | null {