From 1144fae8c7589118c7ebe62eded7a3a7e9f219fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Thu, 12 Dec 2024 09:34:17 +0300 Subject: [PATCH] fix(legacy): reset cached active period in `tui-input-date-range` (#9946) --- .../input-date-range.pw.spec.ts | 39 +++++++++++++++++++ .../input-date-range/examples/5/index.html | 10 +++++ .../input-date-range/examples/5/index.ts | 7 +++- .../input-date-range.component.ts | 29 +++++++------- 4 files changed, 71 insertions(+), 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 index a9694c2556e4..974c0ce6a597 100644 --- 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 index eb0d1ecd0d84..83033fb1c9b5 100644 --- 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 + + 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 index 10eb8731a3da..0ad5e887bc68 100644 --- 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 index 582e9d067221..30f1c8feba2b 100644 --- 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 + ); + } }