From 3b211b60fd9a88be6e232f839ecc4be090181530 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:15:02 -0500
Subject: [PATCH] fix(datetime): close month/year picker when hidden (#25789)

resolves #25787
---
 core/src/components/datetime/datetime.tsx     |  9 ++++++
 .../datetime/test/basic/datetime.e2e.ts       | 31 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 2d2c354068..c63d6eb515 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1086,6 +1086,15 @@ export class Datetime implements ComponentInterface {
 
       this.destroyInteractionListeners();
 
+      /**
+       * When datetime is hidden, we need to make sure that
+       * the month/year picker is closed. Otherwise,
+       * it will be open when the datetime re-appears
+       * and the scroll area of the calendar grid will be 0.
+       * As a result, the wrong month will be shown.
+       */
+      this.showMonthAndYear = false;
+
       writeTask(() => {
         this.el.classList.remove('datetime-ready');
       });
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 324c9b64c1..87c4b648a3 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -248,3 +248,34 @@ test.describe('datetime: swiping', () => {
     }
   });
 });
+
+test.describe('datetime: visibility', () => {
+  test('should reset month/year interface when hiding datetime', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
+
+    await page.setContent(`
+      <ion-datetime></ion-datetime>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const monthYearButton = page.locator('ion-datetime .calendar-month-year');
+    const monthYearInterface = page.locator('ion-datetime .datetime-year');
+    const datetime = page.locator('ion-datetime');
+
+    await monthYearButton.click();
+    await page.waitForChanges();
+
+    await expect(monthYearInterface).toBeVisible();
+
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.setProperty('display', 'none'));
+    await expect(datetime).toBeHidden();
+
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
+    await expect(datetime).toBeVisible();
+
+    // month/year interface should be reset
+    await expect(monthYearInterface).toBeHidden();
+  });
+});