voyager-ionic-core 7.6.5 → 7.7.2

package/dist/collection/components/datetime/datetime.js

@@ -526,22 +526,41 @@ export class Datetime {
             const didChangeMonth = (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);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            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,
-                });
+            /**
+             * 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,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -1574,7 +1593,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/collection/components/datetime/test/a11y/datetime.e2e.js

@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </div>
       `, config);
             const container = page.locator('#container');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
         });
     });
@@ -64,7 +64,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const clearButton = page.locator('#clear-button button');
             const selectedDay = page.locator('.calendar-day-active');
             await expect(selectedDay).toHaveText('22');
@@ -80,7 +80,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         <ion-datetime value="2022-02-28"></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const calendarBody = page.locator('.calendar-body');
             await expect(calendarMonthYear).toHaveText('February 2022');

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -82,7 +82,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const ionChange = await page.spyOnEvent('ionChange');
             // Oct 1, 2022
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -200,7 +200,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -213,7 +213,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -237,7 +237,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const monthYearButton = page.locator('ion-datetime .calendar-month-year');
             const monthYearInterface = page.locator('ion-datetime .datetime-year');
             const datetime = page.locator('ion-datetime');
@@ -249,7 +249,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await expect(datetime).not.toHaveClass(/datetime-ready/);
             await datetime.evaluate((el) => el.style.removeProperty('display'));
             await expect(datetime).toBeVisible();
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             // month/year interface should be reset
             await expect(monthYearInterface).toBeHidden();
         });
@@ -287,7 +287,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime value="2022-11-10" show-clear-button="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const selectedDay = page.locator('ion-datetime .calendar-day-active');
             await expect(selectedDay).toHaveText('10');
             await page.click('ion-datetime #clear-button');
@@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const ionChange = await page.spyOnEvent('ionChange');
             const calendarButtons = page.locator('.calendar-day:not([disabled])');
             await calendarButtons.nth(0).click();
@@ -317,7 +317,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const ionChange = await page.spyOnEvent('ionChange');
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2022-01-01'));
@@ -349,7 +349,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </script>
       `, config);
             const datetime = page.locator('ion-datetime');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(screenshot(`datetime-today-calendar-button`));
         });
     });
@@ -369,7 +369,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime value="2021-01-01"></ion-datetime>
       `, config);
             const datetime = page.locator('ion-datetime');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));
             await datetime.evaluate((el) => (el.value = '2021-01-31'));
             await page.waitForChanges();
@@ -387,7 +387,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-datetime value="2023-08-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const day = datetime.locator(`.calendar-day[data-day='1'][data-month='8']`);
             await day.focus();

package/dist/collection/components/datetime/test/datetime.e2e.js

@@ -9,7 +9,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="date" value="2022-01-31"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
         });
         test('should switch the calendar header when moving to a month with a different number of days', async ({ page, }) => {
             const monthYearToggle = page.locator('ion-datetime .calendar-month-year');

package/dist/collection/components/datetime/test/disable-dates/datetime.e2e.js

@@ -99,7 +99,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test.describe('check example usages', () => {
             test.beforeEach(async ({ page }) => {
                 await page.goto('/src/components/datetime/test/disable-dates', config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').first().waitFor();
             });
             test('should disable a specific date', async ({ page }) => {
                 const disabledDay = queryAllDisabledDays(page, '#specificDate');

package/dist/collection/components/datetime/test/disabled/datetime.e2e.js

@@ -20,7 +20,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
             await expect(febFirstButton).toBeDisabled();
         });
@@ -28,7 +28,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarMonthYear.locator('button')).toBeDisabled();
         });
@@ -46,7 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
         <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const clearButton = page.locator('#clear-button button');
             await expect(clearButton).toBeDisabled();
         });
@@ -54,7 +54,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const calendarBody = page.locator('.calendar-body');
             await expect(calendarMonthYear).toHaveText('February 2022');

package/dist/collection/components/datetime/test/display/datetime.e2e.js

@@ -14,7 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
             });
@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
             });
@@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
             });
@@ -38,7 +38,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
             });
@@ -56,7 +56,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
             });
@@ -64,7 +64,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
             });
@@ -72,7 +72,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
             });
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
             });
@@ -96,7 +96,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('month selection should work after changing presentation', async ({ page }) => {
             await page.goto('/src/components/datetime/test/display', config);
             const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const select = page.locator('select#presentation');
             await select.selectOption('date-time');
             await page.waitForChanges();

package/dist/collection/components/datetime/test/locale/datetime.e2e.js

@@ -77,7 +77,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
             await expect(datetimeButtons.nth(0)).toHaveText('١');
             await expect(datetimeButtons.nth(1)).toHaveText('٢');
@@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
             await expect(datetimeYear).toHaveText('٢٠٢٢');
         });
@@ -111,7 +111,7 @@ class DatetimeLocaleFixture {
       ></ion-datetime>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
     }
     async expectLocalizedDatePicker(screenshot) {
         await this.expectLocalizedPicker(screenshot);

package/dist/collection/components/datetime/test/minmax/datetime.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           }
         </script>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
             await expect(nextButton).toHaveJSProperty('disabled', false);
@@ -48,21 +48,21 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test('datetime: minmax months disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
             const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
         });
         test('datetime: minmax navigation disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
             await expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
             await expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
         });
         test('datetime: min including day should not disable month', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
             await expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
@@ -77,7 +77,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 await page.setContent(`
           <ion-datetime min="2022-04-22T04:10:00" max="2022-05-21T21:30:00"></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('.time-body');
                 await ionPopoverDidPresent.next();
@@ -90,7 +90,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test.describe('setting value outside bounds should show in-bounds month', () => {
             const testDisplayedMonth = async (page, content, expectedString = /June 2021/) => {
                 await page.setContent(content, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
                 await expect(calendarMonthYear).toHaveText(expectedString);
             };
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           });
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
             const eventButton = page.locator('button#bind');
             await eventButton.click();
@@ -186,7 +186,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T06:00"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -201,7 +201,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T09:00"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -220,7 +220,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 const datetime = page.locator('ion-datetime');
                 const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
                 const ionChange = await page.spyOnEvent('ionChange');
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 await monthColumnItems.nth(0).click(); // switch to January
                 await ionChange.next();
                 await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00');
@@ -248,7 +248,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 // Select Jan 10, 2022
                 const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
                 await maxDate.click();

package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js

@@ -11,7 +11,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: month-year picker'), () => {
         test.beforeEach(async ({ page }) => {
             await page.goto('/src/components/datetime/test/month-year-picker', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
         });
         test('should hide the footer when picker is open', async ({ page }) => {
             const datetimeFooter = page.locator('#date-time .datetime-footer');

package/dist/collection/components/datetime/test/multiple/datetime.e2e.js

@@ -5,7 +5,7 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 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'];
 class DatetimeMultipleFixture {
     constructor(page) {
         this.page = page;
@@ -41,7 +41,7 @@ class DatetimeMultipleFixture {
       </script>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         return this.datetime;
     }
     async expectMultipleDatePicker(id, screenshot) {
@@ -118,10 +118,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 value: ['2022-06-01', '2022-06-02'],
             });
         });
-        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, dates) => {
+                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, dates) => {
+                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 }) => {
             const datetime = await datetimeFixture.goto(config, SINGLE_DATE, { showDefaultButtons: true });
@@ -216,7 +233,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           }
         </script>
       `, config);
-            await page.waitForSelector(`.datetime-ready`);
+            await page.locator(`.datetime-ready`).waitFor();
             const datetime = page.locator('ion-datetime');
             const header = datetime.locator('.datetime-selected-date');
             await expect(header).toHaveText('Mon, Oct 10');

package/dist/collection/components/datetime/test/position/datetime.e2e.js

@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
             const openDateTimeBtn = page.locator('ion-button#open-datetime');
             await openDateTimeBtn.click();
             await ionPopoverDidPresent.next();
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
             const timepickerBtn = page.locator('ion-datetime .time-body');
             await timepickerBtn.click();