fix(kit): InputDateRange should not distinguish ranges with same da…

…tes and different names

projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts

@@ -11,6 +11,7 @@ import {
 test.describe('InputDateRange', () => {
     let example!: Locator;
     let inputDateRange!: TuiInputDateRangePO;
+    let documentationPage!: TuiDocumentationPagePO;
 
     test.use({
         viewport: {width: 650, height: 650},
@@ -19,7 +20,8 @@ test.describe('InputDateRange', () => {
     test.beforeEach(async ({page}) => {
         await tuiGoto(page, 'components/input-date-range');
 
-        example = new TuiDocumentationPagePO(page).apiPageExample;
+        documentationPage = new TuiDocumentationPagePO(page);
+        example = documentationPage.apiPageExample;
 
         inputDateRange = new TuiInputDateRangePO(example.locator('tui-input-date-range'));
     });
@@ -159,4 +161,26 @@ test.describe('InputDateRange', () => {
             );
         });
     });
+
+    test.describe('Examples', () => {
+        test('Select second same range => after close/open calendar displays selected period displays correctly', async () => {
+            const example = documentationPage.getExample('#custom-period');
+
+            const inputDateRange = new TuiInputDateRangePO(
+                example.locator('tui-input-date-range'),
+            );
+
+            await inputDateRange.textfield.click();
+            await inputDateRange.selectItem(2);
+            await inputDateRange.textfield.click();
+
+            expect(await inputDateRange.itemHasCheckmark(1)).toBeFalsy();
+            expect(await inputDateRange.itemHasCheckmark(2)).toBeTruthy();
+
+            await expect(inputDateRange.textfield).toHaveValue('Yet another yesterday');
+            await expect(inputDateRange.calendarRange).toHaveScreenshot(
+                '08-calendar-correct-selected-period-after-close-open.png',
+            );
+        });
+    });
 });

projects/demo-playwright/utils/page-objects/input-date-range.po.ts

@@ -24,4 +24,14 @@ export class TuiInputDateRangePO {
 
         await items[index].click();
     }
+
+    async itemHasCheckmark(index: number): Promise<boolean> {
+        const items = await this.getItems();
+
+        const itemCheckmark = await items[index]
+            .locator('[automation-id="tui-calendar-range__checkmark"]')
+            .count();
+
+        return !!itemCheckmark;
+    }
 }

projects/demo/src/modules/components/input-date-range/examples/5/index.ts

@@ -28,5 +28,10 @@ export class TuiInputDateRangeExample5 {
             'Yesterday',
             ({$implicit}) => `Yesterday (${$implicit.from})`,
         ),
+        new TuiDayRangePeriod(
+            new TuiDayRange(yesterday, yesterday),
+            'Yet another yesterday',
+            ({$implicit}) => `Yet another yesterday (${$implicit.from})`,
+        ),
     ];
 }

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

@@ -96,7 +96,7 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
         @Optional()
         @Inject(TUI_CALENDAR_DATE_STREAM)
         valueChanges: Observable<TuiDayRange | null> | null,
-        @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef,
+        @Inject(ChangeDetectorRef) readonly cdr: ChangeDetectorRef,
         @Self() @Inject(TuiDestroyService) destroy$: TuiDestroyService,
         @Inject(TUI_OTHER_DATE_TEXT) readonly otherDateText$: Observable<string>,
         @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons,
@@ -180,15 +180,15 @@ export class TuiCalendarRangeComponent implements TuiWithOptionalMinMax<TuiDay>
 
     onItemSelect(item: TuiDayRangePeriod | string): void {
         if (!tuiIsString(item)) {
-            this.updateValue(item.range.dayLimit(this.min, this.max));
             this.selectedActivePeriod = item;
+            this.updateValue(item.range.dayLimit(this.min, this.max));
 
             return;
         }
 
         if (this.activePeriod !== null) {
-            this.updateValue(null);
             this.selectedActivePeriod = null;
+            this.updateValue(null);
         }
     }
 

projects/kit/components/input-date-range/input-date-range.component.ts

@@ -1,7 +1,9 @@
 import {
+    AfterViewChecked,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    forwardRef,
     HostBinding,
     HostListener,
     Inject,
@@ -55,6 +57,7 @@ import {
     TuiWithOptionalMinMax,
 } from '@taiga-ui/core';
 import {TuiDayRangePeriod} from '@taiga-ui/kit/classes';
+import {TuiCalendarRangeComponent} from '@taiga-ui/kit/components/calendar-range';
 import {
     MAX_DAY_RANGE_LENGTH_MAPPER,
     TUI_DATE_MODE_MASKITO_ADAPTER,
@@ -91,11 +94,17 @@ import {map} from 'rxjs/operators';
 })
 export class TuiInputDateRangeComponent
     extends AbstractTuiNullableControl<TuiDayRange>
-    implements TuiWithOptionalMinMax<TuiDay>, TuiFocusableElementAccessor
+    implements
+        TuiWithOptionalMinMax<TuiDay>,
+        TuiFocusableElementAccessor,
+        AfterViewChecked
 {
     @ViewChild(TuiPrimitiveTextfieldComponent)
     private readonly textfield?: TuiPrimitiveTextfieldComponent;
 
+    @ViewChild(forwardRef(() => TuiCalendarRangeComponent))
+    private readonly calendarRange?: TuiCalendarRangeComponent;
+
     @Input()
     disabledItemHandler: TuiBooleanHandler<TuiDay> = ALWAYS_FALSE_HANDLER;
 
@@ -122,6 +131,8 @@ export class TuiInputDateRangeComponent
 
     open = false;
 
+    selectedActivePeriod: TuiDayRangePeriod | null = null;
+
     readonly maxLengthMapper: TuiTypedMapper<
         [TuiDay, TuiDayRange | null, TuiDayLike | null, boolean],
         TuiDay
@@ -157,6 +168,21 @@ export class TuiInputDateRangeComponent
         super(control, cdr, valueTransformer);
     }
 
+    @HostListener('click')
+    onClick(): void {
+        if (!this.isMobile && this.interactive) {
+            this.toggle();
+        }
+    }
+
+    // TODO: remove this after refactor controls to hold whole TuiDayRangePeriod
+    ngAfterViewChecked(): void {
+        if (this.calendarRange) {
+            this.calendarRange.selectedActivePeriod = this.selectedActivePeriod;
+            this.calendarRange.cdr.markForCheck();
+        }
+    }
+
     @HostBinding('attr.data-size')
     get size(): TuiSizeL | TuiSizeS {
         return this.textfieldSize.size;
@@ -215,15 +241,17 @@ export class TuiInputDateRangeComponent
 
     get activePeriod(): TuiDayRangePeriod | null {
         return (
-            this.items.find(item =>
+            this.selectedActivePeriod ??
+            (this.items.find(item =>
                 tuiNullableSame(
                     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)
         );
     }
 
@@ -269,20 +297,13 @@ export class TuiInputDateRangeComponent
         }
     }
 
-    @HostListener('click')
-    onClick(): void {
-        if (!this.isMobile && this.interactive) {
-            this.open = !this.open;
-        }
-    }
-
     getComputedRangeFiller(dateFiller: string): string {
         return this.activePeriod ? '' : this.getDateRangeFiller(dateFiller);
     }
 
     onIconClick(): void {
         if (this.isMobile && this.interactive) {
-            this.open = true;
+            this.onOpenChange(true);
         }
     }
 
@@ -303,6 +324,10 @@ export class TuiInputDateRangeComponent
             value.length === DATE_RANGE_FILLER_LENGTH
                 ? TuiDayRange.normalizeParse(value, this.dateFormat)
                 : null;
+
+        if (!this.value) {
+            this.selectedActivePeriod = null;
+        }
     }
 
     onRangeChange(range: TuiDayRange | null): void {
@@ -314,6 +339,7 @@ export class TuiInputDateRangeComponent
         }
 
         this.value = range;
+        this.selectedActivePeriod = this.calendarRange?.selectedActivePeriod ?? null;
     }
 
     // TODO: investigate if it is used anywhere and (if not) delete it in v4.0

projects/kit/components/input-date-range/test/input-date-range.component.spec.ts

@@ -92,6 +92,28 @@ describe('InputDateRangeComponent', () => {
             initializeEnvironment();
         });
 
+        it('When switching between ranges with same date, displays appropriate input value', async () => {
+            const today = TuiDay.currentLocal();
+            const previousMonth = today.append({month: -1});
+            const first = '1';
+            const second = '2';
+
+            testComponent.items = [
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), first),
+                new TuiDayRangePeriod(new TuiDayRange(previousMonth, today), second),
+            ];
+            fixture.detectChanges();
+
+            clickOnTextfield();
+
+            getCalendarItems()[1]?.nativeElement.click();
+            fixture.detectChanges();
+
+            await fixture.whenStable();
+
+            expect(inputPO.value).toBe(second);
+        });
+
         describe('Click on the input field', () => {
             it('opens the calendar', () => {
                 clickOnTextfield();
@@ -406,6 +428,10 @@ describe('InputDateRangeComponent', () => {
         return pageObject.getByAutomationId('tui-calendar-range__calendars');
     }
 
+    function getCalendarItems(): DebugElement[] {
+        return pageObject.getAllByAutomationId('tui-calendar-range__menu__item');
+    }
+
     function getTextfield(): DebugElement | null {
         return pageObject.getByAutomationId('tui-input-date-range__textfield');
     }