fix(legacy): InputDate incorrect value after backspace (#9650)

taiga-family · Nov 5, 2024 · 6a10460 · 6a10460
2 parents 5908330 + f6caf49
commit 6a10460
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 7 deletions.
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
@@ -173,8 +173,12 @@ export class TuiInputDateComponent
             this.onOpenChange(true);
         }
 
+        if (this.activeItem) {
+            this.nativeValue = '';
+        }
+
         this.value =
-            value.length !== DATE_FILLER_LENGTH
+            value.length !== DATE_FILLER_LENGTH || this.activeItem
                 ? null
                 : TuiDay.normalizeParse(value, this.dateFormat.mode);
     }

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
@@ -3,7 +3,7 @@ import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {TuiDay, TuiValueTransformer} from '@taiga-ui/cdk';
+import {TUI_LAST_DAY, TuiDay, TuiValueTransformer} from '@taiga-ui/cdk';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TUI_DATE_FORMAT, TuiHint, TuiRoot} from '@taiga-ui/core';
 import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
@@ -13,6 +13,7 @@ import {
     TuiInputDateModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/legacy';
+import {TuiNamedDay} from '@taiga-ui/legacy/classes';
 import {TuiNativeInputPO, TuiPageObject} from '@taiga-ui/testing';
 import {of} from 'rxjs';
 
@@ -30,12 +31,14 @@ describe('InputDate', () => {
             <tui-root>
                 <tui-input-date
                     [formControl]="control"
+                    [items]="items"
                     [min]="min"
                     [readOnly]="readOnly"
                     [tuiHintContent]="hintContent"
                     [tuiTextfieldCleaner]="cleaner"
                     [tuiTextfieldLabelOutside]="labelOutside"
                     [tuiTextfieldSize]="size"
+                    [(ngModel)]="value"
                 >
                     Select date
                 </tui-input-date>
@@ -57,6 +60,10 @@ describe('InputDate', () => {
 
         public labelOutside = false;
 
+        public items: TuiNamedDay[] = [];
+
+        public value: TuiDay | null = new TuiDay(2017, 2, 1);
+
         public size: TuiSizeL | TuiSizeS = 'm';
 
         public hintContent: string | null = 'prompt';
@@ -117,6 +124,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');
@@ -175,6 +190,64 @@ describe('InputDate', () => {
                 });
             });
         });
+
+        describe('With items', () => {
+            beforeEach(() => {
+                testComponent.items = [
+                    new TuiNamedDay(
+                        new TuiDay(2017, 2, 1),
+                        'Current',
+                        TuiDay.currentLocal(),
+                    ),
+                    new TuiNamedDay(
+                        TUI_LAST_DAY.append({year: -1}),
+                        'Until today',
+                        TuiDay.currentLocal(),
+                    ),
+                ];
+            });
+
+            it('when entering item date, input shows named date', async () => {
+                inputPO.sendText('01.02.2017');
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Current');
+            });
+
+            it('when control value updated with item date, input shows named date', async () => {
+                testComponent.control.setValue(TUI_LAST_DAY.append({year: -1}));
+                fixture.detectChanges();
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Until today');
+            });
+
+            it('when ngModel value updated with item date, input shows named date', async () => {
+                testComponent.value = TUI_LAST_DAY.append({year: -1});
+                fixture.detectChanges();
+
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Until today');
+            });
+
+            it('when selected item date via calendar, input shows named date', async () => {
+                mouseDownOnTextfield();
+
+                expect(getCalendar()).not.toBeNull();
+
+                const calendarCell = getCalendarCell(1);
+
+                calendarCell?.nativeElement.click();
+
+                fixture.detectChanges();
+                await fixture.whenStable();
+
+                expect(inputPO.value).toBe('Current');
+            });
+        });
     });
 
     describe('InputDate + TUI_DATE_FORMAT = YMD integration', () => {