fix(datetime): multiple month selected and flakiness display (#31053)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Currently, the Datepicker keeps all the months visited as selected
instead of only the one that is really selected
On iOS devices, the month picker sometimes doesn't appear since the
`datepicker-ready` class is not added

## What is the new behavior?
Only the selected month appears selected in the month picker
On iOS devices, an additional validation is done to add the
`datepicker-ready` class

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

The
[Basic](https://ionic-framework-7el9b9l3f-ionic1.vercel.app/src/components/datetime/test/basic/?ionic:theme=ionic)
test should be used to test the multiple-month selection case
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: os-davidlourenco

core/src/components/datetime/datetime.tsx

@@ -1086,16 +1086,17 @@ export class Datetime implements ComponentInterface {
 
   connectedCallback() {
     this.clearFocusVisible = startFocusVisible(this.el).destroy;
+    this.loadTimeout = setTimeout(() => {
+      this.ensureReadyIfVisible();
+    }, 100);
   }
 
   disconnectedCallback() {
     if (this.clearFocusVisible) {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
-    if (this.loadTimeout) {
-      clearTimeout(this.loadTimeout);
-    }
+    this.loadTimeoutCleanup();
   }
 
   /**
@@ -1146,6 +1147,13 @@ export class Datetime implements ComponentInterface {
     });
   };
 
+  private loadTimeoutCleanup = () => {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = undefined;
+    }
+  };
+
   componentDidLoad() {
     const { el, intersectionTrackerRef } = this;
 
@@ -1193,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

@@ -349,6 +349,43 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 });
 
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: month picker selection'), () => {
+    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.

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);
         }