fix(kit): InputDate click any day after Until today selected

projects/demo-playwright/tests/kit/input-date/input-date.spec.ts

@@ -0,0 +1,39 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import type {Locator} from '@playwright/test';
+import {expect, test} from '@playwright/test';
+
+import {TuiInputDatePO} from '../../../utils';
+
+test.describe('InputDate', () => {
+    test.describe('API', () => {
+        let example: Locator;
+        let inputDate!: TuiInputDatePO;
+        let documentationPage: TuiDocumentationPagePO;
+
+        test.use({
+            viewport: {
+                width: 600,
+                height: 800,
+            },
+        });
+
+        test.beforeEach(({page}) => {
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+
+            inputDate = new TuiInputDatePO(example.locator('tui-input-date'));
+        });
+
+        test('Click any day after `Until today` was selected', async ({page}) => {
+            await tuiGoto(page, 'components/input-date/API?items$=1');
+
+            await inputDate.textfield.click();
+            await inputDate.clickItemButton();
+
+            await inputDate.textfield.click();
+            await inputDate.clickOnCalendarDay(1);
+
+            await expect(inputDate.textfield).toHaveScreenshot('01-input-date.png');
+        });
+    });
+});

projects/demo-playwright/utils/page-objects/index.ts

@@ -3,6 +3,7 @@ export * from './calendar-range.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-grouped.po';
+export * from './input-date.po';
 export * from './input-date-range.po';
 export * from './input-date-time.po';
 export * from './input-month.po';

projects/demo-playwright/utils/page-objects/input-date.po.ts

@@ -0,0 +1,25 @@
+import {Locator} from '@playwright/test';
+
+import {TuiCalendarPO} from './calendar.po';
+
+export class TuiInputDatePO {
+    readonly textfield: Locator = this.host.locator(
+        '[automation-id="tui-primitive-textfield__native-input"]',
+    );
+
+    constructor(private readonly host: Locator) {}
+
+    async clickItemButton(): Promise<void> {
+        const itemButton = this.host
+            .page()
+            .locator('[automation-id="tui-input-date__button"]');
+
+        await itemButton.click();
+    }
+
+    async clickOnCalendarDay(day: number): Promise<void> {
+        const calendar = new TuiCalendarPO(this.host.page().locator('tui-calendar'));
+
+        await calendar.clickOnCalendarDay(day);
+    }
+}

projects/kit/components/input-date/input-date.component.ts

@@ -210,7 +210,15 @@ export class TuiInputDateComponent
     }
 
     get computedMask(): MaskitoOptions {
-        return this.activeItem
+        /**
+         * TODO: we can delete this workaround in v4.0
+         * after solving this issue:
+         * https://github.com/taiga-family/maskito/issues/604
+         */
+        const nativeValueIsNotSynced =
+            this.textfield?.nativeFocusableElement?.value !== this.computedValue;
+
+        return this.activeItem || nativeValueIsNotSynced
             ? MASKITO_DEFAULT_OPTIONS
             : this.computeMaskOptions(
                   this.dateFormat,

projects/kit/components/input-date/input-date.template.html

@@ -71,6 +71,7 @@
             class="t-button"
         >
             <button
+                automation-id="tui-input-date__button"
                 tuiLink
                 type="button"
                 (click)="onDayClick(items[0].day)"