diff --git a/projects/demo-cypress/tsconfig.json b/projects/demo-cypress/tsconfig.json index 4fc6a9f2f020..a8128146a835 100644 --- 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 index 3bd7fc4403d9..72a3f1f68c25 100644 --- 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,7 +43,9 @@ 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(); @@ -51,9 +53,39 @@ test.describe('InputDate', () => { 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 index 2fda5cbb38db..4ccd193cf9c0 100644 --- 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); }