fix(datetime): ensures no orphan timeout exists

Author: os-davidlourenco

core/src/components/datetime/datetime.tsx

@@ -1096,10 +1096,7 @@ export class Datetime implements ComponentInterface {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
-    if (this.loadTimeout) {
-      clearTimeout(this.loadTimeout);
-      this.loadTimeout = undefined;
-    }
+    this.loadTimeoutCleanup();
   }
 
   /**
@@ -1150,6 +1147,13 @@ export class Datetime implements ComponentInterface {
     });
   };
 
+  private loadTimeoutCleanup = () => {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
+    }
+  };
+
   componentDidLoad() {
     const { el, intersectionTrackerRef } = this;
 
@@ -1197,7 +1201,10 @@ export class Datetime implements ComponentInterface {
      * we still initialize listeners and mark the component as ready.
      *
      * We schedule this after everything has had a chance to run.
+     *
+     * We also clean up the load timeout to ensure that we don't have multiple timeouts running.
      */
+    this.loadTimeoutCleanup();
     this.loadTimeout = setTimeout(() => {
       this.ensureReadyIfVisible();
     }, 100);

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -270,39 +270,6 @@ configs().forEach(({ title, screenshot, config }) => {
       const datetime = page.locator('ion-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-footer-custom-buttons`));
     });
-    test('should only have one active month option after changing month twice', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-datetime value="2022-05-03"></ion-datetime>
-      `,
-        config
-      );
-
-      await page.locator('.datetime-ready').waitFor();
-
-      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
-      const monthYearButton = page.locator('ion-datetime .calendar-month-year');
-
-      await monthYearButton.click();
-      await page.waitForChanges();
-      await monthYearButton.click();
-      await page.waitForChanges();
-      await nextMonthButton.click();
-      await page.waitForChanges();
-      await page.waitForTimeout(2000);
-      await monthYearButton.click();
-      await page.waitForChanges();
-      await monthYearButton.click();
-      await page.waitForChanges();
-      await nextMonthButton.click();
-      await page.waitForChanges();
-      await page.waitForTimeout(2000);
-      await monthYearButton.click();
-      await page.waitForChanges();
-
-      const selectedMonthOptions = page.locator('.month-column ion-picker-column-option.option-active');
-      await expect(selectedMonthOptions).toHaveCount(1);
-    });
   });
 });
 
@@ -382,6 +349,40 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 });
 
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config }) => {
+  test('datetime: month picker selection', async ({ page }) => {
+    await page.setContent(
+      `
+      <ion-datetime value="2022-05-03"></ion-datetime>
+    `,
+      config
+    );
+
+    await page.locator('.datetime-ready').waitFor();
+
+    const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
+    const monthYearButton = page.locator('ion-datetime .calendar-month-year');
+
+    await expect(monthYearButton).toHaveText(/May 2022/);
+
+    await nextMonthButton.click();
+    await expect(monthYearButton).toHaveText(/June 2022/);
+
+    await nextMonthButton.click();
+    await expect(monthYearButton).toHaveText(/July 2022/);
+
+    await monthYearButton.click();
+    await page.waitForChanges();
+
+    const selectedMonthOptions = page.locator('.month-column ion-picker-column-option.option-active');
+    await expect(selectedMonthOptions).toHaveCount(1);
+  });
+});
+
 /**
  * This behavior does not differ across
  * modes/directions.