From 1a15f35c4550f2ed67a2df019943ad37b7731f33 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Tue, 22 Oct 2024 19:29:49 +0300
Subject: [PATCH 1/4] fix(kit): `InputDate` click any day after `Until today`
 selected

---
 .../tests/kit/input-date/input-date.spec.ts   | 39 +++++++++++++++++++
 .../utils/page-objects/index.ts               |  1 +
 .../utils/page-objects/input-date.po.ts       | 25 ++++++++++++
 .../input-date/input-date.component.ts        | 10 ++++-
 .../input-date/input-date.template.html       |  1 +
 5 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 projects/demo-playwright/tests/kit/input-date/input-date.spec.ts
 create mode 100644 projects/demo-playwright/utils/page-objects/input-date.po.ts

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
new file mode 100644
index 000000000000..658d071951ab
--- /dev/null
+++ b/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');
+        });
+    });
+});
diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
index 4924e3a6a281..6ebc2eb3ffc8 100644
--- a/projects/demo-playwright/utils/page-objects/index.ts
+++ b/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';
diff --git a/projects/demo-playwright/utils/page-objects/input-date.po.ts b/projects/demo-playwright/utils/page-objects/input-date.po.ts
new file mode 100644
index 000000000000..d1b1fb82c307
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
index e9ad3b30b548..fe106b1a19a4 100644
--- a/projects/kit/components/input-date/input-date.component.ts
+++ b/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,
diff --git a/projects/kit/components/input-date/input-date.template.html b/projects/kit/components/input-date/input-date.template.html
index 828ff01c0c38..8d1ceb2831b6 100644
--- a/projects/kit/components/input-date/input-date.template.html
+++ b/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)"

From 926016001e748cac4825238631c07ef601ed2cec Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Wed, 23 Oct 2024 12:56:52 +0300
Subject: [PATCH 2/4] chore(demo-playwright): `InputDate` use calendar inside
 InputDatePO

---
 .../tests/kit/input-date/input-date.spec.ts         |  8 +++++---
 .../utils/page-objects/input-date.po.ts             | 13 ++-----------
 2 files changed, 7 insertions(+), 14 deletions(-)

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 658d071951ab..149a588fd8d6 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
@@ -2,13 +2,14 @@ import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
-import {TuiInputDatePO} from '../../../utils';
+import {TuiCalendarPO, TuiInputDatePO} from '../../../utils';
 
 test.describe('InputDate', () => {
     test.describe('API', () => {
+        let documentationPage: TuiDocumentationPagePO;
         let example: Locator;
         let inputDate!: TuiInputDatePO;
-        let documentationPage: TuiDocumentationPagePO;
+        let calendar!: TuiCalendarPO;
 
         test.use({
             viewport: {
@@ -22,6 +23,7 @@ test.describe('InputDate', () => {
             example = documentationPage.apiPageExample;
 
             inputDate = new TuiInputDatePO(example.locator('tui-input-date'));
+            calendar = new TuiCalendarPO(inputDate.calendar);
         });
 
         test('Click any day after `Until today` was selected', async ({page}) => {
@@ -31,7 +33,7 @@ test.describe('InputDate', () => {
             await inputDate.clickItemButton();
 
             await inputDate.textfield.click();
-            await inputDate.clickOnCalendarDay(1);
+            await calendar.clickOnCalendarDay(1);
 
             await expect(inputDate.textfield).toHaveScreenshot('01-input-date.png');
         });
diff --git a/projects/demo-playwright/utils/page-objects/input-date.po.ts b/projects/demo-playwright/utils/page-objects/input-date.po.ts
index d1b1fb82c307..cd8d35b30b46 100644
--- a/projects/demo-playwright/utils/page-objects/input-date.po.ts
+++ b/projects/demo-playwright/utils/page-objects/input-date.po.ts
@@ -1,11 +1,8 @@
 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"]',
-    );
+    readonly textfield: Locator = this.host.getByRole('textbox');
+    readonly calendar: Locator = this.host.page().locator('tui-calendar');
 
     constructor(private readonly host: Locator) {}
 
@@ -16,10 +13,4 @@ export class TuiInputDatePO {
 
         await itemButton.click();
     }
-
-    async clickOnCalendarDay(day: number): Promise<void> {
-        const calendar = new TuiCalendarPO(this.host.page().locator('tui-calendar'));
-
-        await calendar.clickOnCalendarDay(day);
-    }
 }

From f638ff62941e00c18da1553c36d6bafc5882d384 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Wed, 23 Oct 2024 15:49:17 +0300
Subject: [PATCH 3/4] chore(demo-playwright): `InputDate` use button selector
 instead `automationd-id`

---
 .../tests/kit/input-date/input-date.spec.ts           |  2 +-
 .../utils/page-objects/input-date.po.ts               | 11 +++--------
 .../components/input-date/input-date.template.html    |  1 -
 3 files changed, 4 insertions(+), 10 deletions(-)

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 149a588fd8d6..ca4ee2ee4348 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
@@ -30,7 +30,7 @@ test.describe('InputDate', () => {
             await tuiGoto(page, 'components/input-date/API?items$=1');
 
             await inputDate.textfield.click();
-            await inputDate.clickItemButton();
+            await inputDate.itemButton.click();
 
             await inputDate.textfield.click();
             await calendar.clickOnCalendarDay(1);
diff --git a/projects/demo-playwright/utils/page-objects/input-date.po.ts b/projects/demo-playwright/utils/page-objects/input-date.po.ts
index cd8d35b30b46..7961a0c7d3df 100644
--- a/projects/demo-playwright/utils/page-objects/input-date.po.ts
+++ b/projects/demo-playwright/utils/page-objects/input-date.po.ts
@@ -3,14 +3,9 @@ import {Locator} from '@playwright/test';
 export class TuiInputDatePO {
     readonly textfield: Locator = this.host.getByRole('textbox');
     readonly calendar: Locator = this.host.page().locator('tui-calendar');
+    readonly itemButton: Locator = this.host
+        .page()
+        .locator('tui-dropdown tui-calendar ~ * button');
 
     constructor(private readonly host: Locator) {}
-
-    async clickItemButton(): Promise<void> {
-        const itemButton = this.host
-            .page()
-            .locator('[automation-id="tui-input-date__button"]');
-
-        await itemButton.click();
-    }
 }
diff --git a/projects/kit/components/input-date/input-date.template.html b/projects/kit/components/input-date/input-date.template.html
index 8d1ceb2831b6..828ff01c0c38 100644
--- a/projects/kit/components/input-date/input-date.template.html
+++ b/projects/kit/components/input-date/input-date.template.html
@@ -71,7 +71,6 @@
             class="t-button"
         >
             <button
-                automation-id="tui-input-date__button"
                 tuiLink
                 type="button"
                 (click)="onDayClick(items[0].day)"

From 6a08b9a4d8e3c709c3a35fd0b1286b890df32d66 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Thu, 24 Oct 2024 13:25:39 +0300
Subject: [PATCH 4/4] chore(demo-playwright): `CalendarSheet` add

---
 .../input-date-range/input-date-range.spec.ts |  5 +++-
 .../tests/kit/input-date/input-date.spec.ts   |  9 +++++--
 .../utils/page-objects/calendar-sheet.po.ts   | 25 +++++++++++++++++++
 .../utils/page-objects/calendar.po.ts         | 23 +++++++++--------
 .../utils/page-objects/index.ts               |  1 +
 .../utils/page-objects/input-date.po.ts       |  3 ---
 6 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts

diff --git a/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts b/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
index da1585501bf2..cdedb4b81c28 100644
--- a/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
+++ b/projects/demo-playwright/tests/kit/input-date-range/input-date-range.spec.ts
@@ -151,7 +151,10 @@ test.describe('InputDateRange', () => {
             await expect(inputDateRange.textfield).toHaveValue('Today');
 
             await inputDateRange.textfield.click();
-            await calendar.clickOnCalendarDay(21);
+
+            const [calendarSheet] = await calendar.getCalendarSheets();
+
+            await calendarSheet?.clickOnDay(21);
 
             await expect(inputDateRange.textfield).toHaveValue(
                 `21.09.2020${CHAR_NO_BREAK_SPACE}–${CHAR_NO_BREAK_SPACE}25.09.2020`,
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 ca4ee2ee4348..92d756b5c726 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
@@ -8,6 +8,7 @@ test.describe('InputDate', () => {
     test.describe('API', () => {
         let documentationPage: TuiDocumentationPagePO;
         let example: Locator;
+
         let inputDate!: TuiInputDatePO;
         let calendar!: TuiCalendarPO;
 
@@ -23,6 +24,7 @@ test.describe('InputDate', () => {
             example = documentationPage.apiPageExample;
 
             inputDate = new TuiInputDatePO(example.locator('tui-input-date'));
+
             calendar = new TuiCalendarPO(inputDate.calendar);
         });
 
@@ -30,10 +32,13 @@ test.describe('InputDate', () => {
             await tuiGoto(page, 'components/input-date/API?items$=1');
 
             await inputDate.textfield.click();
-            await inputDate.itemButton.click();
+            await calendar.itemButton.click();
 
             await inputDate.textfield.click();
-            await calendar.clickOnCalendarDay(1);
+
+            const [calendarSheet] = await calendar.getCalendarSheets();
+
+            await calendarSheet?.clickOnDay(1);
 
             await expect(inputDate.textfield).toHaveScreenshot('01-input-date.png');
         });
diff --git a/projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts b/projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts
new file mode 100644
index 000000000000..66222b90c2c4
--- /dev/null
+++ b/projects/demo-playwright/utils/page-objects/calendar-sheet.po.ts
@@ -0,0 +1,25 @@
+import type {Locator} from '@playwright/test';
+
+export class TuiCalendarSheetPO {
+    constructor(private readonly host: Locator) {}
+
+    async getDays(): Promise<Locator[]> {
+        return this.host
+            .locator(
+                '[automation-id="tui-primitive-calendar__cell"], [automation-id="tui-primitive-calendar-mobile__cell"]',
+            )
+            .all();
+    }
+
+    async clickOnDay(day: number): Promise<void> {
+        const cells = await this.getDays();
+
+        for (const cell of cells) {
+            if ((await cell.textContent())?.trim() === day.toString()) {
+                await cell.click();
+
+                break;
+            }
+        }
+    }
+}
diff --git a/projects/demo-playwright/utils/page-objects/calendar.po.ts b/projects/demo-playwright/utils/page-objects/calendar.po.ts
index ea1cc32086e3..d1c5126ced3a 100644
--- a/projects/demo-playwright/utils/page-objects/calendar.po.ts
+++ b/projects/demo-playwright/utils/page-objects/calendar.po.ts
@@ -1,19 +1,20 @@
 import {Locator} from '@playwright/test';
 
+import {TuiCalendarSheetPO} from './calendar-sheet.po';
+
 export class TuiCalendarPO {
-    constructor(private readonly host: Locator) {}
+    readonly itemButton: Locator = this.host
+        .page()
+        .locator('tui-dropdown tui-calendar ~ * button');
 
-    async getDays(): Promise<Locator[]> {
-        return this.host.locator('[automation-id="tui-primitive-calendar__cell"]').all();
-    }
+    constructor(private readonly host: Locator) {}
 
-    async clickOnCalendarDay(day: number): Promise<void> {
-        const cells = await this.getDays();
+    async getCalendarSheets(): Promise<TuiCalendarSheetPO[]> {
+        const locators = await this.host
+            .page()
+            .locator('tui-primitive-calendar, tui-primitive-calendar-mobile')
+            .all();
 
-        for (const cell of cells) {
-            if ((await cell.textContent())?.trim() === day.toString()) {
-                return cell.click();
-            }
-        }
+        return locators.map(x => new TuiCalendarSheetPO(x));
     }
 }
diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
index 6ebc2eb3ffc8..21be022fc957 100644
--- a/projects/demo-playwright/utils/page-objects/index.ts
+++ b/projects/demo-playwright/utils/page-objects/index.ts
@@ -1,5 +1,6 @@
 export * from './calendar.po';
 export * from './calendar-range.po';
+export * from './calendar-sheet.po';
 export * from './documentation-page.po';
 export * from './input-card.po';
 export * from './input-card-grouped.po';
diff --git a/projects/demo-playwright/utils/page-objects/input-date.po.ts b/projects/demo-playwright/utils/page-objects/input-date.po.ts
index 7961a0c7d3df..a4d5d32b6408 100644
--- a/projects/demo-playwright/utils/page-objects/input-date.po.ts
+++ b/projects/demo-playwright/utils/page-objects/input-date.po.ts
@@ -3,9 +3,6 @@ import {Locator} from '@playwright/test';
 export class TuiInputDatePO {
     readonly textfield: Locator = this.host.getByRole('textbox');
     readonly calendar: Locator = this.host.page().locator('tui-calendar');
-    readonly itemButton: Locator = this.host
-        .page()
-        .locator('tui-dropdown tui-calendar ~ * button');
 
     constructor(private readonly host: Locator) {}
 }