From c4e2b433865385b918a80b28246ed7b26ae9fb7b Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Wed, 17 Jun 2026 12:23:52 -0500
Subject: [PATCH 1/4] fix(datetime): respect config animated setting when
paging month calendar
replace hardcoded `behavior: 'smooth'` with either `'smooth'` or `'instant'` depending on the `animated` boolean config property, defaulting to `'smooth'`
closes #30484
---
core/src/components/datetime/datetime.tsx | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index f36cd66718d..ab9939504ae 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -8,6 +8,7 @@ import { isRTL } from '@utils/rtl';
import { createColorClasses } from '@utils/theme';
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
+import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import type { Color, Mode, StyleEventDetail } from '../../interface';
@@ -1555,10 +1556,11 @@ export class Datetime implements ComponentInterface {
const left = (nextMonth as HTMLElement).offsetWidth * 2;
+ const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
calendarBodyRef.scrollTo({
top: 0,
left: left * (isRTL(this.el) ? -1 : 1),
- behavior: 'smooth',
+ behavior: scrollMode,
});
};
@@ -1575,10 +1577,11 @@ export class Datetime implements ComponentInterface {
const left = (prevMonth as HTMLElement).offsetWidth * 2;
+ const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
calendarBodyRef.scrollTo({
top: 0,
left: left * (isRTL(this.el) ? 1 : -1),
- behavior: 'smooth',
+ behavior: scrollMode,
});
};
From db38b1b9a292802bf1a2a12817526a87a8c94ddb Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:53:29 -0500
Subject: [PATCH 2/4] test(datetime): add tests for scroll animation speed with
config animated property
---
.../datetime/test/basic/datetime.e2e.ts | 82 +++++++++++++++++++
1 file changed, 82 insertions(+)
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index ff7c93c046e..76373870afb 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -816,3 +816,85 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
});
});
});
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe.only(title('datetime: animated'), () => {
+ test('next month button should instantly replace month view when animations are disabled', async ({ page }) => {
+ test.info().annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+ });
+
+ await page.addInitScript(() => {
+
+
+ (window as any).__scrollToCalls = [];
+ const original = Element.prototype.scrollTo;
+ Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+ if (this.classList?.contains('calendar-body')) {
+ (window as any).__scrollToCalls.push(args[0]);
+ }
+ return (original as any).apply(this, args);
+ };
+ });
+
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+ await page.locator('.datetime-ready').waitFor();
+
+ const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
+ await nextMonthButton.click();
+ await page.waitForChanges();
+
+ const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+ expect(scrollCalls.length).toBeGreaterThan(0);
+ expect(scrollCalls[0].behavior).toBe('instant');
+ });
+
+ test('previous month button should instantly replace month view when animations are disabled', async ({ page }) => {
+ test.info().annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+ });
+
+ await page.addInitScript(() => {
+ (window as any).__scrollToCalls = [];
+ const original = Element.prototype.scrollTo;
+ Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+ if (this.classList?.contains('calendar-body')) {
+ (window as any).__scrollToCalls.push(args[0]);
+ }
+ return (original as any).apply(this, args);
+ };
+ });
+
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+ await page.locator('.datetime-ready').waitFor();
+
+ const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(0);
+ await prevMonthButton.click();
+ await page.waitForChanges();
+
+ const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+ expect(scrollCalls.length).toBeGreaterThan(0);
+ expect(scrollCalls[0].behavior).toBe('instant');
+ });
+ });
+});
From e606735f7026efdac6ad0dc2dfc132966a33917f Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:54:11 -0500
Subject: [PATCH 3/4] fix(datetime.e2e): remove debugging "only" from tests
---
core/src/components/datetime/test/basic/datetime.e2e.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 76373870afb..aebaa504f2b 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -822,7 +822,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
* modes/directions.
*/
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
- test.describe.only(title('datetime: animated'), () => {
+ test.describe(title('datetime: animated'), () => {
test('next month button should instantly replace month view when animations are disabled', async ({ page }) => {
test.info().annotations.push({
type: 'issue',
From b5d274c6fb9a6b4d73372c0da9cc11a130211f38 Mon Sep 17 00:00:00 2001
From: droc101 <37421449+droc101@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:31:13 -0500
Subject: [PATCH 4/4] fix(datetime.e2e): fix linter error
---
core/src/components/datetime/test/basic/datetime.e2e.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index aebaa504f2b..3d8c8f111f3 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -830,8 +830,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
});
await page.addInitScript(() => {
-
-
(window as any).__scrollToCalls = [];
const original = Element.prototype.scrollTo;
Element.prototype.scrollTo = function (this: Element, ...args: any[]) {