fix(datetime): multiple month selected and flakiness display

Author: os-davidlourenco

core/src/components/datetime/datetime.tsx

@@ -1086,6 +1086,9 @@ export class Datetime implements ComponentInterface {
 
   connectedCallback() {
     this.clearFocusVisible = startFocusVisible(this.el).destroy;
+    this.loadTimeout = setTimeout(() => {
+      this.ensureReadyIfVisible();
+    }, 100);
   }
 
   disconnectedCallback() {
@@ -1095,6 +1098,7 @@ export class Datetime implements ComponentInterface {
     }
     if (this.loadTimeout) {
       clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
     }
   }
 

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

@@ -270,6 +270,29 @@ 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 nextMonthButton.click();
+      await nextMonthButton.click();
+      await page.waitForChanges();
+
+      await monthYearButton.click();
+      await page.waitForChanges();
+
+      const selectedMonthOptions = page.locator('.month-column ion-picker-column-option.option-active');
+      await expect(selectedMonthOptions).toHaveCount(1);
+    });
   });
 });
 

core/src/components/picker-column/picker-column.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 import { doc } from '@utils/browser';
-import { getElementRoot, raf } from '@utils/helpers';
+import { raf } from '@utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
 import { isPlatform } from '@utils/platform';
 import { createColorClasses } from '@utils/theme';
@@ -122,9 +122,7 @@ export class PickerColumn implements ComponentInterface {
          * Because this initial call to scrollActiveItemIntoView has to fire before
          * the scroll listener is set up, we need to manage the active class manually.
          */
-        const oldActive = getElementRoot(el).querySelector<HTMLIonPickerColumnOptionElement>(
-          `.${PICKER_ITEM_ACTIVE_CLASS}`
-        );
+        const oldActive = el.querySelector<HTMLIonPickerColumnOptionElement>(`.${PICKER_ITEM_ACTIVE_CLASS}`);
         if (oldActive) {
           this.setPickerItemActiveState(oldActive, false);
         }