fix(kit): InputDate hold initial value with min/max defined (#9623)

taiga-family · Nov 5, 2024 · 18a40c2 · 18a40c2
1 parent f47554a
commit 18a40c2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/projects/demo-cypress/tsconfig.json b/projects/demo-cypress/tsconfig.json
@@ -4,6 +4,6 @@
         "typeRoots": ["../../node_modules/@types", "../../node_modules/cypress/types", "../../scripts/types"],
         "types": ["cypress", "node", "cypress-real-events", "@testing-library/cypress", "ng-dev-mode"]
     },
-    "include": ["./cypress/**/*.ts"],
+    "include": ["**/*.ts"],
     "exclude": []
 }
diff --git a/projects/demo-playwright/tests/kit/input-date/input-date.spec.ts b/projects/demo-playwright/tests/kit/input-date/input-date.spec.ts
@@ -43,17 +43,49 @@ test.describe('InputDate', () => {
             await expect(inputDate.textfield).toHaveScreenshot('01-input-date.png');
         });
 
-        test('Click `Until today`', async ({page}) => {
+        test('Click `Until today`, calendar not switched to large date', async ({
+            page,
+        }) => {
             await tuiGoto(page, 'components/input-date/API?items$=1');
 
             await inputDate.textfield.click();
             await calendar.itemButton.click();
 
             await inputDate.textfield.click();
 
+            await expect(inputDate.textfield).toHaveValue('Until today');
             await expect(inputDate.calendar).toHaveScreenshot(
                 '02-input-date-calendar.png',
             );
         });
+
+        test('Press backspace to remove `Until today`, textfield is empty', async ({
+            page,
+        }) => {
+            await tuiGoto(page, 'components/input-date/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(
+                '03-input-date-textfield-empty.png',
+            );
+        });
+
+        test('Enter item date, it converts to item date name', async ({page}) => {
+            await tuiGoto(page, 'components/input-date/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(
+                '04-input-date-item-name.png',
+            );
+        });
     });
 });
diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
@@ -24,7 +24,9 @@ import {
     DATE_FILLER_LENGTH,
     TUI_DATE_FORMAT,
     TUI_DATE_SEPARATOR,
+    TUI_FIRST_DAY,
     TUI_IS_MOBILE,
+    TUI_LAST_DAY,
     TUI_LAST_DISPLAYED_DAY,
     TuiActiveZoneDirective,
     tuiAsControl,
@@ -148,10 +150,28 @@ export class TuiInputDateComponent
     }
 
     get computedMin(): TuiDay {
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_FIRST_DAY;
+        }
+
         return this.min ?? this.options.min;
     }
 
     get computedMax(): TuiDay {
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        if (this.value && this.control?.pristine) {
+            return TUI_LAST_DAY;
+        }
+
         return this.max ?? this.options.max;
     }
 
@@ -222,8 +242,7 @@ export class TuiInputDateComponent
          * after solving this issue:
          * https://github.com/taiga-family/maskito/issues/604
          */
-        const nativeValueIsNotSynced =
-            this.textfield?.nativeFocusableElement?.value !== this.computedValue;
+        const nativeValueIsNotSynced = this.nativeValue !== this.computedValue;
 
         return this.activeItem || nativeValueIsNotSynced
             ? MASKITO_DEFAULT_OPTIONS
@@ -276,8 +295,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);
     }