From 82160654a93b441a9ffee24d1280318b69baba6d Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Tue, 18 Jun 2024 17:22:44 +0300
Subject: [PATCH] fix(kit): `CalendarRange` should not distinguish ranges with
 same dates and different names

---
 .../calendar-range.component.ts               | 13 +++++---
 .../calendar-range.template.html              | 11 ++++---
 .../test/calendar-range.component.spec.ts     | 32 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/projects/kit/components/calendar-range/calendar-range.component.ts b/projects/kit/components/calendar-range/calendar-range.component.ts
index 1aa6bcc6239c5..a04b9eb6888f7 100644
--- a/projects/kit/components/calendar-range/calendar-range.component.ts
+++ b/projects/kit/components/calendar-range/calendar-range.component.ts
@@ -58,6 +58,7 @@ export class TuiCalendarRangeComponent implements OnChanges {
     protected readonly icons = inject(TUI_COMMON_ICONS);
     protected previousValue: TuiDayRange | null = null;
     protected hoveredItem: TuiDay | null = null;
+    protected activeItemIndex: number | null = null;
     protected readonly capsMapper = TUI_DAY_CAPS_MAPPER;
 
     @Input()
@@ -145,17 +146,21 @@ export class TuiCalendarRangeComponent implements OnChanges {
         otherDateText || '',
     ];
 
-    protected isItemActive(item: TuiDayRangePeriod | string): boolean {
-        const {activePeriod} = this;
+    protected isItemActive(item: TuiDayRangePeriod | string, index: number): boolean {
+        const {activeItemIndex} = this;
 
-        return (tuiIsString(item) && activePeriod === null) || activePeriod === item;
+        return (
+            (tuiIsString(item) && activeItemIndex === null) || activeItemIndex === index
+        );
     }
 
-    protected onItemSelect(item: TuiDayRangePeriod | string): void {
+    protected onItemSelect(item: TuiDayRangePeriod | string, index: number): void {
         if (typeof item !== 'string') {
             this.updateValue(item.range.dayLimit(this.min, this.max));
+            this.activeItemIndex = index;
         } else if (this.activePeriod !== null) {
             this.updateValue(null);
+            this.activeItemIndex = null;
         }
     }
 
diff --git a/projects/kit/components/calendar-range/calendar-range.template.html b/projects/kit/components/calendar-range/calendar-range.template.html
index c82016a1535ca..c71f2e9965a64 100644
--- a/projects/kit/components/calendar-range/calendar-range.template.html
+++ b/projects/kit/components/calendar-range/calendar-range.template.html
@@ -36,17 +36,20 @@
         [style.flex]="1"
     >
         <button
-            *ngFor="let item of items | tuiMapper: mapper : min : max : minLength : (otherDateText$ | async)"
+            *ngFor="
+                let item of items | tuiMapper: mapper : min : max : minLength : (otherDateText$ | async);
+                let i = index
+            "
             automation-id="tui-calendar-range__menu__item"
             role="menuitemradio"
             tuiOption
-            [attr.aria-checked]="isItemActive(item)"
-            (click)="onItemSelect(item)"
+            [attr.aria-checked]="isItemActive(item, i)"
+            (click)="onItemSelect(item, i)"
             (mousedown.prevent.silent)="(0)"
         >
             {{ item }}
             <tui-icon
-                *ngIf="isItemActive(item)"
+                *ngIf="isItemActive(item, i)"
                 automation-id="tui-calendar-range__checkmark"
                 [icon]="icons.check"
                 [style.font-size.rem]="1"
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 cbc2c146367fe..39b54281984c4 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
@@ -124,7 +124,13 @@ describe('rangeCalendarComponent', () => {
 
             testComponent.min = min;
             fixture.detectChanges();
-            component['onItemSelect'](component.items[5]);
+
+            const selectedItemIndex = 5;
+
+            component['onItemSelect'](
+                component.items[selectedItemIndex],
+                selectedItemIndex,
+            );
             fixture.detectChanges();
 
             expect(
@@ -168,6 +174,30 @@ describe('rangeCalendarComponent', () => {
             expect(items[0].nativeElement.textContent.trim()).toBe(title);
             expect(items[1].nativeElement.textContent.trim()).toBe('Other date...');
         });
+
+        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();
+
+            const selectedItemIndex = 1;
+
+            component['onItemSelect'](
+                component.items[selectedItemIndex],
+                selectedItemIndex,
+            );
+            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 {