From 466fda7544ffe55564b0318e974d86d3ac7e5a14 Mon Sep 17 00:00:00 2001 From: mdlufy Date: Thu, 31 Oct 2024 16:41:33 +0300 Subject: [PATCH] fix(legacy): `InputDate` incorrect value after backspace --- projects/cdk/constants/regexp.ts | 1 + .../legacy/input-date/input-date.spec.ts | 35 ++++++++++++++++--- .../input-date/input-date.component.ts | 10 ++++-- .../test/input-date.component.spec.ts | 8 +++++ 4 files changed, 46 insertions(+), 8 deletions(-) diff --git a/projects/cdk/constants/regexp.ts b/projects/cdk/constants/regexp.ts index a2a9dc435e20..8daa8b8e058d 100644 --- a/projects/cdk/constants/regexp.ts +++ b/projects/cdk/constants/regexp.ts @@ -1,3 +1,4 @@ export const TUI_DIGIT_REGEXP = /\d/; export const TUI_NON_DIGIT_REGEXP = /\D/; export const TUI_NON_DIGITS_REGEXP = /\D+/g; +export const TUI_LETTER_REGEXP = /\p{L}/u; diff --git a/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts b/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts index beb24d63871b..7be105ec7b6d 100644 --- a/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts +++ b/projects/demo-playwright/tests/legacy/input-date/input-date.spec.ts @@ -181,17 +181,42 @@ test.describe('InputDate', () => { await expect(inputDate.textfield).toHaveScreenshot('10-input-date.png'); }); - test('Click `Until today`', async ({page}) => { - await tuiGoto(page, 'components/input-date/API?items$=1'); + test('Click `Until today`, calendar not switched to large date', async ({ + page, + }) => { + await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`); await inputDate.textfield.click(); await calendar.itemButton.click(); await inputDate.textfield.click(); - await expect(inputDate.calendar).toHaveScreenshot( - '02-input-date-calendar.png', - ); + await expect(inputDate.calendar).toHaveScreenshot('11-input-date.png'); + }); + + test('Press backspace to remove `Until today`, textfield is empty', async ({ + page, + }) => { + await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`); + + await inputDate.textfield.click(); + await calendar.itemButton.click(); + + await inputDate.textfield.focus(); + await inputDate.textfield.press('Backspace'); + + await expect(inputDate.textfield).toHaveValue(''); + await expect(inputDate.textfield).toHaveScreenshot('12-input-date.png'); + }); + + test('Enter item date, it converts to item name', async ({page}) => { + await tuiGoto(page, `${DemoRoute.InputDate}/API?items$=1`); + + await inputDate.textfield.focus(); + await inputDate.textfield.fill('31.12.9998'); + + await expect(inputDate.textfield).toHaveValue('Until today'); + await expect(inputDate.textfield).toHaveScreenshot('13-input-date.png'); }); }); diff --git a/projects/legacy/components/input-date/input-date.component.ts b/projects/legacy/components/input-date/input-date.component.ts index 4b9c2697f0eb..aaa73707d19a 100644 --- a/projects/legacy/components/input-date/input-date.component.ts +++ b/projects/legacy/components/input-date/input-date.component.ts @@ -8,10 +8,10 @@ import { } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import type {MaskitoOptions} from '@maskito/core'; -import {MASKITO_DEFAULT_OPTIONS} from '@maskito/core'; +import {MASKITO_DEFAULT_OPTIONS, maskitoTransform} from '@maskito/core'; import {maskitoDateOptionsGenerator} from '@maskito/kit'; import {tuiAsControl} from '@taiga-ui/cdk/classes'; -import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants'; +import {TUI_FALSE_HANDLER, TUI_LETTER_REGEXP} from '@taiga-ui/cdk/constants'; import type {TuiDateMode} from '@taiga-ui/cdk/date-time'; import { DATE_FILLER_LENGTH, @@ -174,9 +174,13 @@ export class TuiInputDateComponent } this.value = - value.length !== DATE_FILLER_LENGTH + value.length !== DATE_FILLER_LENGTH || TUI_LETTER_REGEXP.test(value) ? null : TuiDay.normalizeParse(value, this.dateFormat.mode); + + if (TUI_LETTER_REGEXP.test(this.nativeValue)) { + this.nativeValue = maskitoTransform(this.nativeValue, this.computedMask); + } } public override setDisabledState(): void { diff --git a/projects/legacy/components/input-date/test/input-date.component.spec.ts b/projects/legacy/components/input-date/test/input-date.component.spec.ts index 475405d7c30e..0ad7dda5cdba 100644 --- a/projects/legacy/components/input-date/test/input-date.component.spec.ts +++ b/projects/legacy/components/input-date/test/input-date.component.spec.ts @@ -117,6 +117,14 @@ describe('InputDate', () => { expect(inputPO.value).toBe('14.03.2017'); }); + it('if there is min and an initial value and an initial value less than min - keep the initial value', () => { + testComponent.min = new TuiDay(2023, 5, 17); + + fixture.detectChanges(); + + expect(inputPO.value).toBe('01.03.2017'); + }); + describe('Keyboard input', () => { it('the passed date is inserted into the field', () => { inputPO.sendText('01.03.2017');