fix(legacy): reset cached active period

taiga-family · Dec 9, 2024 · 316e3e0 · 316e3e0
1 parent 026d13c
commit 316e3e0
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 30 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
@@ -6,7 +6,6 @@ import {
     signal,
     ViewChild,
 } from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {MaskitoOptions} from '@maskito/core';
 import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core';
 import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';
@@ -22,7 +21,6 @@ import {
     TuiDayRange,
     TuiMonth,
 } from '@taiga-ui/cdk/date-time';
-import {tuiWatch} from '@taiga-ui/cdk/observables';
 import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import type {TuiBooleanHandler} from '@taiga-ui/cdk/types';
 import {
@@ -33,7 +31,7 @@ import {
 } from '@taiga-ui/cdk/utils/miscellaneous';
 import type {TuiMarkerHandler} from '@taiga-ui/core/components/calendar';
 import {tuiAsDataListHost} from '@taiga-ui/core/components/data-list';
-import {TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/tokens';
+import {TUI_DEFAULT_DATE_FORMAT} from '@taiga-ui/core/tokens';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import type {TuiDayRangePeriod} from '@taiga-ui/kit/components/calendar-range';
 import type {TuiInputDateOptions} from '@taiga-ui/kit/tokens';
@@ -105,11 +103,6 @@ export class TuiInputDateRangeComponent
     );
 
     protected dateFormat = TUI_DEFAULT_DATE_FORMAT;
-    protected readonly dateFormat$ = inject(TUI_DATE_FORMAT)
-        .pipe(tuiWatch(this.cdr), takeUntilDestroyed())
-        .subscribe((format) => {
-            this.dateFormat = format;
-        });
 
     protected selectedActivePeriod: TuiDayRangePeriod | null = null;
 
@@ -177,10 +170,7 @@ export class TuiInputDateRangeComponent
 
     public onValueChange(value: string): void {
         this.nativeValue.set(value);
-
-        if (this.control) {
-            this.control.updateValueAndValidity({emitEvent: false});
-        }
+        this.control?.updateValueAndValidity({emitEvent: false});
 
         if (!value && !this.mobileCalendar) {
             this.onOpenChange(true);
@@ -214,10 +204,7 @@ export class TuiInputDateRangeComponent
     public override writeValue(value: TuiDayRange | null): void {
         super.writeValue(value);
         this.nativeValue.set(value ? this.computedValue : '');
-    }
-
-    protected get computedMobile(): boolean {
-        return this.isMobile && !!this.mobileCalendar;
+        this.selectedActivePeriod = this.findActivePeriodBy(value);
     }
 
     protected get calendarIcon(): TuiInputDateOptions['icon'] {
@@ -238,19 +225,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 +322,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
+        );
+    }
 }