diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 77a8727f64..57f275e25f 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/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, + }); + } } }; diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts index 7a353a4ed3..c3a195b89b 100644 --- a/core/src/components/datetime/test/multiple/datetime.e2e.ts +++ b/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(/April 2022/); + 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(/June 2022/); }); test('with buttons, should only update value when confirm is called', async ({ page }) => {