fix(datetime): change approach and added test for use case

Author: os-davidlourenco

core/src/components/datetime/datetime.tsx

@@ -1525,7 +1525,13 @@ export class Datetime implements ComponentInterface {
       return;
     }
 
-    nextMonth.scrollIntoView({ behavior: 'smooth' });
+    const left = (nextMonth as HTMLElement).offsetWidth * 2;
+
+    calendarBodyRef.scrollTo({
+      top: 0,
+      left: left * (isRTL(this.el) ? -1 : 1),
+      behavior: 'smooth',
+    });
   };
 
   private prevMonth = () => {
@@ -1538,7 +1544,14 @@ export class Datetime implements ComponentInterface {
     if (!prevMonth) {
       return;
     }
-    prevMonth.scrollIntoView({ behavior: 'smooth' });
+
+    const left = (prevMonth as HTMLElement).offsetWidth * 2;
+
+    calendarBodyRef.scrollTo({
+      top: 0,
+      left: left * (isRTL(this.el) ? 1 : -1),
+      behavior: 'smooth',
+    });
   };
 
   private toggleMonthAndYearView = () => {

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(
+        `
+        <ion-datetime show-adjacent-days="true" value="2026-02-14T16:22:00.000Z" presentation="date"></ion-datetime>
+      `,
+        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',
+      });
+    });
   });
 });