fix(legacy): InputDate incorrect value after backspace

taiga-family · Oct 31, 2024 · 466fda7 · 466fda7
1 parent ef07b82
commit 466fda7
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');