diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index b0b54c2ac62..f6abf07b8d5 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1963,10 +1963,13 @@ export class Datetime implements ComponentInterface { month: ev.detail.value, }); - this.setActiveParts({ - ...activePart, - 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, + month: ev.detail.value, + }); + } ev.stopPropagation(); }} @@ -2007,10 +2010,13 @@ export class Datetime implements ComponentInterface { year: ev.detail.value, }); - this.setActiveParts({ - ...activePart, - 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, + year: ev.detail.value, + }); + } ev.stopPropagation(); }} 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', + ]); + }); + } + ); +});