fix(legacy): reset cached active period in tui-input-date-range (#9946

)
taiga-family · Dec 12, 2024 · 1144fae · 1144fae
1 parent 1a51fdf
commit 1144fae
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 14 deletions.
diff --git a/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts b/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts
@@ -325,4 +325,43 @@ test.describe('InputDateRange', () => {
             });
         });
     });
+
+    test('check valid active period', async ({page}) => {
+        await tuiGoto(page, DemoRoute.InputDateRange);
+
+        const example = documentationPage.getExample('#custom-period');
+        const inputDateRange = new TuiInputDateRangePO(
+            example.locator('tui-input-date-range'),
+        );
+
+        await inputDateRange.textfield.focus();
+        await inputDateRange.textfieldIcon.click();
+        await inputDateRange.selectItem(1);
+
+        await expect(inputDateRange.textfield).toHaveValue('Yesterday');
+        await expect(inputDateRange.host).toHaveScreenshot(
+            '13-data-range-custom-period-yesterday-focused.png',
+        );
+
+        await inputDateRange.textfield.blur();
+
+        await expect(inputDateRange.host).toHaveScreenshot(
+            '14-data-range-custom-period-yesterday-unfocused.png',
+        );
+
+        await inputDateRange.textfield.focus();
+        await inputDateRange.textfieldIcon.click();
+        await inputDateRange.selectItem(0);
+
+        await expect(inputDateRange.textfield).toHaveValue('Today');
+        await expect(inputDateRange.host).toHaveScreenshot(
+            '15-data-range-custom-period-today-focused.png',
+        );
+
+        await inputDateRange.textfield.blur();
+
+        await expect(inputDateRange.host).toHaveScreenshot(
+            '16-data-range-custom-period-today-unfocused.png',
+        );
+    });
 });
diff --git a/projects/demo/src/modules/components/input-date-range/examples/5/index.html b/projects/demo/src/modules/components/input-date-range/examples/5/index.html
@@ -4,3 +4,13 @@
 >
     Choose dates
 </tui-input-date-range>
+
+<button
+    size="s"
+    tuiButton
+    type="button"
+    class="tui-space_top-4"
+    (click)="selectToday()"
+>
+    Select today
+</button>
diff --git a/projects/demo/src/modules/components/input-date-range/examples/5/index.ts b/projects/demo/src/modules/components/input-date-range/examples/5/index.ts
@@ -3,6 +3,7 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
+import {TuiButton} from '@taiga-ui/core';
 import {TuiDayRangePeriod} from '@taiga-ui/kit';
 import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
 
@@ -11,7 +12,7 @@ const yesterday = today.append({day: -1});
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiInputDateRangeModule],
+    imports: [ReactiveFormsModule, TuiButton, TuiInputDateRangeModule],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
@@ -36,4 +37,8 @@ export default class Example {
             ({$implicit}) => `Yet another yesterday (${$implicit.from})`,
         ),
     ];
+
+    protected selectToday(): void {
+        this.control.setValue(new TuiDayRange(today, today));
+    }
 }
diff --git a/projects/legacy/components/input-date-range/input-date-range.component.ts b/projects/legacy/components/input-date-range/input-date-range.component.ts
@@ -214,6 +214,7 @@ export class TuiInputDateRangeComponent
     public override writeValue(value: TuiDayRange | null): void {
         super.writeValue(value);
         this.nativeValue.set(value ? this.computedValue : '');
+        this.selectedActivePeriod = this.findActivePeriodBy(value);
     }
 
     protected get computedMobile(): boolean {
@@ -238,19 +239,7 @@ export class TuiInputDateRangeComponent
     }
 
     protected get activePeriod(): TuiDayRangePeriod | null {
-        return (
-            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)
-        );
+        return this.selectedActivePeriod ?? this.findActivePeriodBy(this.value);
     }
 
     protected get showValueTemplate(): boolean {
@@ -347,4 +336,18 @@ export class TuiInputDateRangeComponent
     private getDateRangeFiller(dateFiller: string): string {
         return `${dateFiller}${RANGE_SEPARATOR_CHAR}${dateFiller}`;
     }
+
+    private findActivePeriodBy(value: TuiDayRange | null): TuiDayRangePeriod | null {
+        return (
+            this.items.find((item) =>
+                tuiNullableSame(
+                    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
+        );
+    }
 }