From d676d79413ff9dfdc9b2db2ef8f0c329979fcf67 Mon Sep 17 00:00:00 2001 From: droc101 <37421449+droc101@users.noreply.github.com> Date: Fri, 26 Jun 2026 11:01:44 -0500 Subject: [PATCH 1/5] fix(datetime): don't setActiveParts from month/year wheels when multiple=true change event handlers for ion-picker-columns in renderMonthPickerColumn and renderYearPickerColumn to not call setActiveParts when multiple=true closes #29673 --- core/src/components/datetime/datetime.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index b0b54c2ac62..73de2bdd16b 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1963,10 +1963,12 @@ export class Datetime implements ComponentInterface { month: ev.detail.value, }); - this.setActiveParts({ - ...activePart, - month: ev.detail.value, - }); + if (!this.multiple) { + this.setActiveParts({ + ...activePart, + month: ev.detail.value, + }); + } ev.stopPropagation(); }} @@ -2007,10 +2009,12 @@ export class Datetime implements ComponentInterface { year: ev.detail.value, }); - this.setActiveParts({ - ...activePart, - year: ev.detail.value, - }); + if (!this.multiple) { + this.setActiveParts({ + ...activePart, + year: ev.detail.value, + }); + } ev.stopPropagation(); }} From 303ab941330107fb4c3b4ad418bc24617ff75988 Mon Sep 17 00:00:00 2001 From: droc101 <37421449+droc101@users.noreply.github.com> Date: Fri, 26 Jun 2026 11:10:49 -0500 Subject: [PATCH 2/5] test(datetime): add tests for month/year wheels changing or not changing value depending on multiple property --- .../datetime/test/basic/datetime.e2e.ts | 118 ++++++++++++++++++ 1 file changed, 118 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..6a0ecd1a250 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -816,3 +816,121 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); }); }); + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe.only(title("datetime: interaction between month/year wheels and selected date(s) with different values of multiple"), () => { + test('using month wheel should change selection when multiple=false', async ({page}, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent(``, config); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', '2026-01-26T10:36:00'); + }); + + test('using month wheel should not change selection when multiple=true', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent( + ` + + + `, + config + ); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', [ + '2026-06-26T10:36:00', + '2026-06-28T10:36:00', + '2026-01-1T10:36:00', + ]); + }); + + test('using year wheel should change selection when multiple=false', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent(``, config); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.year-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', '1926-06-26T10:36:00'); + }); + + test('using year wheel should not change selection when multiple=true', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent( + ` + + + `, + config + ); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.year-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', [ + '2026-06-26T10:36:00', + '2026-06-28T10:36:00', + '2026-01-1T10:36:00', + ]); + }); + }); +}); From 3004301ddfa90794b38b3abb215d17a553839c96 Mon Sep 17 00:00:00 2001 From: droc101 <37421449+droc101@users.noreply.github.com> Date: Fri, 26 Jun 2026 11:11:49 -0500 Subject: [PATCH 3/5] 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 6a0ecd1a250..44d77ffc2ca 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -818,7 +818,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe.only(title("datetime: interaction between month/year wheels and selected date(s) with different values of multiple"), () => { + test.describe(title("datetime: interaction between month/year wheels and selected date(s) with different values of multiple"), () => { test('using month wheel should change selection when multiple=false', async ({page}, testInfo) => { testInfo.annotations.push({ type: 'issue', From e1d25415c2a499effe6eddfa83ba20587d4673af Mon Sep 17 00:00:00 2001 From: droc101 <37421449+droc101@users.noreply.github.com> Date: Fri, 26 Jun 2026 12:16:38 -0500 Subject: [PATCH 4/5] fix(datetime): add comments explaining reasoning for changes --- core/src/components/datetime/datetime.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 73de2bdd16b..f6abf07b8d5 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1963,6 +1963,7 @@ export class Datetime implements ComponentInterface { month: ev.detail.value, }); + // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673 if (!this.multiple) { this.setActiveParts({ ...activePart, @@ -2009,6 +2010,7 @@ export class Datetime implements ComponentInterface { year: ev.detail.value, }); + // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673 if (!this.multiple) { this.setActiveParts({ ...activePart, From b951799ef2ac5991b4332bcb4594b85865dec7fc Mon Sep 17 00:00:00 2001 From: droc101 <37421449+droc101@users.noreply.github.com> Date: Fri, 26 Jun 2026 12:16:53 -0500 Subject: [PATCH 5/5] fix(datetime.e2e): changes from PR review --- .../datetime/test/basic/datetime.e2e.ts | 118 ----------------- .../datetime/test/multiple/datetime.e2e.ts | 121 ++++++++++++++++++ 2 files changed, 121 insertions(+), 118 deletions(-) diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 44d77ffc2ca..ff7c93c046e 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -816,121 +816,3 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); }); }); - -configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title("datetime: interaction between month/year wheels and selected date(s) with different values of multiple"), () => { - test('using month wheel should change selection when multiple=false', async ({page}, testInfo) => { - testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/29673', - }); - - await page.setContent(``, config); - const datetime = page.locator('ion-datetime'); - - await page.waitForSelector('.datetime-ready'); - - const dropdownButton = page.locator('.calendar-month-year-toggle'); - await dropdownButton.click(); - await page.waitForChanges(); - - const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); - await monthOption.click(); - await page.waitForChanges(); - - await expect(datetime).toHaveJSProperty('value', '2026-01-26T10:36:00'); - }); - - test('using month wheel should not change selection when multiple=true', async ({ page }, testInfo) => { - testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/29673', - }); - - await page.setContent( - ` - - - `, - config - ); - const datetime = page.locator('ion-datetime'); - - await page.waitForSelector('.datetime-ready'); - - const dropdownButton = page.locator('.calendar-month-year-toggle'); - await dropdownButton.click(); - await page.waitForChanges(); - - const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); - await monthOption.click(); - await page.waitForChanges(); - - await expect(datetime).toHaveJSProperty('value', [ - '2026-06-26T10:36:00', - '2026-06-28T10:36:00', - '2026-01-1T10:36:00', - ]); - }); - - test('using year wheel should change selection when multiple=false', async ({ page }, testInfo) => { - testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/29673', - }); - - await page.setContent(``, config); - const datetime = page.locator('ion-datetime'); - - await page.waitForSelector('.datetime-ready'); - - const dropdownButton = page.locator('.calendar-month-year-toggle'); - await dropdownButton.click(); - await page.waitForChanges(); - - const monthOption = page.locator('.year-column ion-picker-column-option').nth(0); - await monthOption.click(); - await page.waitForChanges(); - - await expect(datetime).toHaveJSProperty('value', '1926-06-26T10:36:00'); - }); - - test('using year wheel should not change selection when multiple=true', async ({ page }, testInfo) => { - testInfo.annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/29673', - }); - - await page.setContent( - ` - - - `, - config - ); - const datetime = page.locator('ion-datetime'); - - await page.waitForSelector('.datetime-ready'); - - const dropdownButton = page.locator('.calendar-month-year-toggle'); - await dropdownButton.click(); - await page.waitForChanges(); - - const monthOption = page.locator('.year-column ion-picker-column-option').nth(0); - await monthOption.click(); - await page.waitForChanges(); - - await expect(datetime).toHaveJSProperty('value', [ - '2026-06-26T10:36:00', - '2026-06-28T10:36:00', - '2026-01-1T10:36:00', - ]); - }); - }); -}); diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts index 55a386f6f27..22fada77bda 100644 --- a/core/src/components/datetime/test/multiple/datetime.e2e.ts +++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts @@ -337,3 +337,124 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); }); }); + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe( + title('datetime: interaction between month/year wheels and selected date(s) with different values of multiple'), + () => { + test('using month wheel should change selection when multiple=false', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent(``, config); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', '2026-01-26T10:36:00'); + }); + + test('using month wheel should not change selection when multiple=true', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent( + ` + + + `, + config + ); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const monthOption = page.locator('.month-column ion-picker-column-option').nth(0); + await monthOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', [ + '2026-06-26T10:36:00', + '2026-06-28T10:36:00', + '2026-01-01T10:36:00', + ]); + }); + + test('using year wheel should change selection when multiple=false', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent(``, config); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const yearOption = page.locator('.year-column ion-picker-column-option').nth(0); + await yearOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', '1926-06-26T10:36:00'); + }); + + test('using year wheel should not change selection when multiple=true', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29673', + }); + + await page.setContent( + ` + + + `, + config + ); + const datetime = page.locator('ion-datetime'); + + await page.waitForSelector('.datetime-ready'); + + const dropdownButton = page.locator('.calendar-month-year-toggle'); + await dropdownButton.click(); + await page.waitForChanges(); + + const yearOption = page.locator('.year-column ion-picker-column-option').nth(0); + await yearOption.click(); + await page.waitForChanges(); + + await expect(datetime).toHaveJSProperty('value', [ + '2026-06-26T10:36:00', + '2026-06-28T10:36:00', + '2026-01-01T10:36:00', + ]); + }); + } + ); +});