fix(datetime): presentation time emits ionChange once

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage, E2EPage } from '@stencil/core/testing';
 
 test('presentation', async () => {
   const page = await newE2EPage({
@@ -13,3 +13,37 @@ test('presentation', async () => {
     expect(screenshotCompare).toMatchScreenshot();
   }
 });
+
+describe('presentation: time', () => {
+
+  let page: E2EPage;
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      url: '/src/components/datetime/test/presentation?ionic:_testing=true'
+    });
+  });
+
+  describe('when the time picker is visible in the view', () => {
+
+    it('manually setting the value should emit ionChange once', async () => {
+      const datetime = await page.find('ion-datetime[presentation="time"]');
+      const didChange = await datetime.spyOnEvent('ionChange');
+
+      await page.$eval('ion-datetime[presentation="time"]', (el: any) => {
+        el.scrollIntoView();
+      });
+
+      await page.$eval('ion-datetime[presentation="time"]', (el: any) => {
+        el.value = '06:02:40';
+      });
+
+      await page.waitForChanges();
+
+      expect(didChange).toHaveReceivedEventTimes(1);
+      expect(didChange).toHaveReceivedEventDetail({ value: '06:02:40' });
+    });
+
+  });
+
+});

core/src/components/picker-column-internal/picker-column-internal.tsx

@@ -67,16 +67,10 @@ export class PickerColumnInternal implements ComponentInterface {
   valueChange() {
     if (this.isColumnVisible) {
       /**
-       * Only scroll the active item into view and emit the value
-       * change, when the picker column is actively visible to the user.
+       * Only scroll the active item into view when the picker column
+       * is actively visible to the user.
        */
-      const { items, value } = this;
       this.scrollActiveItemIntoView();
-
-      const findItem = items.find(item => item.value === value);
-      if (findItem) {
-        this.ionChange.emit(findItem);
-      }
     }
   }
 
@@ -134,6 +128,7 @@ export class PickerColumnInternal implements ComponentInterface {
          *
          */
         this.value = items[0].value;
+        this.emitIonChange();
       }
     }
   }
@@ -148,6 +143,14 @@ export class PickerColumnInternal implements ComponentInterface {
     }
   }
 
+  private emitIonChange() {
+    const { items, value } = this;
+    const findItem = items.find(item => item.value === value);
+    if (findItem) {
+      this.ionChange.emit(findItem);
+    }
+  }
+
   private centerPickerItemInView = (target: HTMLElement, smooth = true) => {
     const { el, isColumnVisible } = this;
     if (isColumnVisible) {
@@ -251,6 +254,7 @@ export class PickerColumnInternal implements ComponentInterface {
 
           if (selectedItem.value !== this.value) {
             this.value = selectedItem.value;
+            this.emitIonChange();
             hapticSelectionEnd();
             this.hapticsStarted = false;
           }