fix(datetime): emit ionChange for non-calendar picker presentation (#25380)

Resolves #25375

Author: sean-perkins

core/src/components/datetime/datetime.tsx

@@ -442,12 +442,13 @@ export class Datetime implements ComponentInterface {
   @Method()
   async confirm(closeOverlay = false) {
     /**
-     * If highlightActiveParts is false, this means the datetime was inited
-     * without a value, and the user hasn't selected one yet. We shouldn't
-     * update the value in this case, since otherwise it would be mysteriously
-     * set to today.
+     * We only update the value if the presentation is not a calendar picker,
+     * or if `highlightActiveParts` is true; indicating that the user
+     * has selected a date from the calendar picker.
+     *
+     * Otherwise "today" would accidentally be set as the value.
      */
-    if (this.highlightActiveParts) {
+    if (this.highlightActiveParts || !this.isCalendarPicker) {
       /**
        * Prevent convertDataToISO from doing any
        * kind of transformation based on timezone
@@ -522,6 +523,11 @@ export class Datetime implements ComponentInterface {
     this.confirm();
   };
 
+  private get isCalendarPicker() {
+    const { presentation } = this;
+    return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+  }
+
   /**
    * Stencil sometimes sets calendarBodyRef to null on rerender, even though
    * the element is present. Query for it manually as a fallback.

core/src/components/datetime/test/presentation/datetime.e2e.ts

@@ -27,6 +27,62 @@ test.describe('datetime: presentation', () => {
       );
     }
   });
+
+  test('presentation: time: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('time');
+    await page.waitForChanges();
+
+    await page.locator('text=AM').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: month-year: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('month-year');
+    await page.waitForChanges();
+
+    await page.locator('text=April').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: month: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('month');
+    await page.waitForChanges();
+
+    await page.locator('text=April').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: year: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('year');
+    await page.waitForChanges();
+
+    await page.locator('text=2021').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
 });
 
 test.describe('datetime: presentation: time', () => {