From 7bd7db2f6f909dc2f72c2931edab0c7625289164 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 19 Aug 2022 14:37:47 +0000
Subject: [PATCH 1/3] tests(datetime): add failing test

---
 .../datetime/test/basic/datetime.e2e.ts       | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 324c9b64c10..d85e151a22e 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();
+  })
+})

From b39a13d0c4d3bc5433eff6f956d11c2a3f8375d8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 19 Aug 2022 14:38:21 +0000
Subject: [PATCH 2/3] fix(datetime): close month/year interface when hidden

---
 core/src/components/datetime/datetime.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 2d2c354068f..c63d6eb5153 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');
       });

From 63a18e7ad39474983379896c1df9eaf78de88b63 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 19 Aug 2022 14:38:25 +0000
Subject: [PATCH 3/3] chore(): lint

---
 core/src/components/datetime/test/basic/datetime.e2e.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index d85e151a22e..87c4b648a34 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -277,5 +277,5 @@ test.describe('datetime: visibility', () => {
 
     // month/year interface should be reset
     await expect(monthYearInterface).toBeHidden();
-  })
-})
+  });
+});