Skip to content

fix(datetime): scroll failing for adjacent days on ios #31033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
os-davidlourenco merged 2 commits into from
Mar 25, 2026
+53 −4
Merged

fix(datetime): scroll failing for adjacent days on ios #31033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f13ceda
fix(datetime): scroll failing for adjacent days on ios
os-davidlourenco Mar 24, 2026
a31502b
fix(datetime): change approach and added test for use case
os-davidlourenco Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
});
};
Expand Down
53 changes: 50 additions & 3 deletions core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => {
Expand Down Expand Up @@ -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(
`
Expand Down Expand Up @@ -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',
});
});
});
});
Loading