fix(datetime): do not animate to new value when multiple values in different months are set

core/src/components/datetime/datetime.tsx

@@ -1284,21 +1284,42 @@ export class Datetime implements ComponentInterface {
       (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
     const bodyIsVisible = el.classList.contains('datetime-ready');
     const { isGridStyle, showMonthAndYear } = this;
-    if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-      this.animateToDate(targetValue);
-    } else {
-      /**
-       * We only need to do this if we didn't just animate to a new month,
-       * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-       */
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        ampm,
-      });
+
+    let areAllSelectedDatesInSameMonth = true;
+    if (Array.isArray(valueToProcess)) {
+      const firstMonth = valueToProcess[0].month;
+      for (const date of valueToProcess) {
+        if (date.month !== firstMonth) {
+          areAllSelectedDatesInSameMonth = false;
+          break;
+        }
+      }
+    }
+
+    /**
+     * If there is more than one date selected
+     * and the dates aren't all in the same month,
+     * then we should neither animate to the date
+     * nor update the working parts because we do
+     * not know which date the user wants to view.
+     */
+    if (areAllSelectedDatesInSameMonth) {
+      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+        this.animateToDate(targetValue);
+      } else {
+        /**
+         * We only need to do this if we didn't just animate to a new month,
+         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+         */
+        this.setWorkingParts({
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          ampm,
+        });
+      }
     }
   };
 

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

@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 
 const SINGLE_DATE = '2022-06-01';
 const MULTIPLE_DATES = ['2022-06-01', '2022-06-02', '2022-06-03'];
-const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-04-01', '2022-05-01', '2022-06-01'];
+const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-03-01', '2022-04-01', '2022-05-01'];
 
 interface DatetimeMultipleConfig {
   multiple?: boolean;
@@ -158,10 +158,32 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       });
     });
 
-    test('multiple default values across months should display at least one value', async () => {
+    test('should scroll to new month when value is updated with multiple dates in the same month', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28602',
+      });
       const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+      await datetime.evaluate((el: HTMLIonDatetimeElement, dates: string[]) => {
+        el.value = dates;
+      }, MULTIPLE_DATES);
+
+      await page.waitForChanges();
+
+      const monthYear = datetime.locator('.calendar-month-year');
+      await expect(monthYear).toHaveText(/June 2022/);
+    });
+
+    test('should not scroll to new month when value is updated with dates in different months', async ({ page }) => {
+      const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES);
+      await datetime.evaluate((el: HTMLIonDatetimeElement, dates: string[]) => {
+        el.value = dates;
+      }, MULTIPLE_DATES_SEPARATE_MONTHS);
+
+      await page.waitForChanges();
+
       const monthYear = datetime.locator('.calendar-month-year');
-      await expect(monthYear).toHaveText(/April 2022/);
+      await expect(monthYear).toHaveText(/June 2022/);
     });
 
     test('with buttons, should only update value when confirm is called', async ({ page }) => {