From 9262f7da15969706039e9d5f11ef5c7bd73ced0d Mon Sep 17 00:00:00 2001 From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Date: Thu, 18 Jan 2024 12:43:06 -0600 Subject: [PATCH] fix(datetime): do not animate to new value when multiple values in different months are set (#28847) Issue number: resolves #28602 --------- ## What is the current behavior? We animate to the new date when the value is changed, but we do not account for multiple selection. This behavior is valuable for when the value is set asynchronously on a different month than what it shown. However, this is confusing when there are multiple dates selected in different months, because we do not reasonably know which date to animate to. ## What is the new behavior? Datetime no longer animates to the new value if more than one date is selected, and the selected dates aren't all in the same month. An alternative strategy would be to always animate unless one of the selected dates is in the month currently being viewed. However, this would still mean guessing at which value the user wants to see, which we are trying to avoid. Based on this PR: https://github.com/ionic-team/ionic-framework/pull/28605 ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Co-authored-by: Liam DeBeasi --------- Co-authored-by: Liam DeBeasi --- core/src/components/datetime/datetime.tsx | 51 +++++++++++++------ .../datetime/test/multiple/datetime.e2e.ts | 28 ++++++++-- 2 files changed, 61 insertions(+), 18 deletions(-) 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 }) => {