fix(datetime): presentation time emits ionChange once (#24968)

Resolves #24967

Author: sean-perkins

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);
-      }
     }
   }
 
@@ -133,7 +127,7 @@ export class PickerColumnInternal implements ComponentInterface {
          * first item to match the scroll position of the column.
          *
          */
-        this.value = items[0].value;
+        this.setValue(items[0].value);
       }
     }
   }
@@ -148,6 +142,15 @@ export class PickerColumnInternal implements ComponentInterface {
     }
   }
 
+  private setValue(value?: string | number) {
+    const { items } = this;
+    this.value = value;
+    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) {
@@ -250,7 +253,7 @@ export class PickerColumnInternal implements ComponentInterface {
           const selectedItem = this.items[index];
 
           if (selectedItem.value !== this.value) {
-            this.value = selectedItem.value;
+            this.setValue(selectedItem.value);
             hapticSelectionEnd();
             this.hapticsStarted = false;
           }

core/src/components/picker-column-internal/test/basic/e2e.ts

@@ -51,6 +51,30 @@ describe('picker-column-internal', () => {
       expect(activeColumn.innerText).toEqual('23');
     });
 
+    it('should not emit ionChange when the value is modified externally', async () => {
+      const pickerColumn = await page.find('#default');
+      const ionChangeSpy = await pickerColumn.spyOnEvent('ionChange');
+
+      await page.$eval('#default', (el: any) => {
+        el.value = '12';
+      });
+
+      expect(ionChangeSpy).not.toHaveReceivedEvent();
+    });
+
+    it('should emit ionChange when the picker is scrolled', async () => {
+      const pickerColumn = await page.find('#default');
+      const ionChangeSpy = await pickerColumn.spyOnEvent('ionChange');
+
+      await page.$eval('#default', (el: any) => {
+        el.scrollTo(0, 300);
+      });
+
+      await ionChangeSpy.next();
+
+      expect(ionChangeSpy).toHaveReceivedEvent();
+    });
+
   });
 
 });