diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index a81e84ec8b9..c591972fd8d 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1545,9 +1545,11 @@ export class Datetime implements ComponentInterface { return; } + const left = (prevMonth as HTMLElement).offsetWidth * 2; + calendarBodyRef.scrollTo({ top: 0, - left: 0, + left: left * (isRTL(this.el) ? 1 : -1), behavior: 'smooth', }); }; diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts index 4aae6c29434..bc9acb8faa5 100644 --- a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts +++ b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts @@ -1,9 +1,6 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -/** - * This behavior does not vary across directions - */ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('datetime: show adjacent days'), () => { test('should not have visual regressions', async ({ page }) => { @@ -54,7 +51,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const datetime = page.locator('#display'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-display`)); }); + }); +}); +configs({ directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => { + test.describe(title('datetime: show adjacent days'), () => { test('should return the same date format on current month days and on adjacent days', async ({ page }) => { await page.setContent( ` @@ -124,5 +125,51 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { value: '2022-11-22T16:22:00', }); }); + + test('should navigate to previous month via swipe and then select adjacent day from prior month', async ({ + page, + }) => { + await page.setContent( + ` + + `, + config + ); + + // Wait for the datetime to be ready. + await page.locator('.datetime-ready').waitFor(); + const ionChange = await page.spyOnEvent('ionChange'); + const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); + const calendarBody = page.locator('ion-datetime .calendar-body'); + + // Wait for the month to be visible. + await expect(calendarMonthYear).toHaveText('February 2026'); + + // Scroll to the previous month. + await calendarBody.evaluate((el: HTMLElement) => { + const rtl = document.documentElement.dir === 'rtl'; + el.scrollLeft += rtl ? el.clientWidth * 2 : -el.clientWidth * 2; + }); + + // Wait for the month to change. + await page.waitForChanges(); + await expect(calendarMonthYear).toHaveText('January 2026'); + + // Select the adjacent day from the prior month. + const dec31Adjacent = page.locator( + '.calendar-day-adjacent-day[data-month="12"][data-year="2025"][data-day="31"]' + ); + await dec31Adjacent.click(); + + // Wait for the month to change. + await page.waitForChanges(); + + // Wait for the month to be visible. + await expect(calendarMonthYear).toHaveText('December 2025'); + await ionChange.next(); + await expect(ionChange).toHaveReceivedEventDetail({ + value: '2025-12-31T16:22:00', + }); + }); }); });