fix(input-date-picker): no longer emits redundant change event (#8341)

**Related Issue:** #7218 ## Summary `calcite-input-date-picker` no longer emits `calciteInputDatePickerChange` event twice when `valueAsDate` is parsed and user changes the date.
Esri · Dec 7, 2023 · cd5b92b · cd5b92b
1 parent 2d1a1e2
commit cd5b92b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -262,6 +262,31 @@ describe("calcite-input-date-picker", () => {
       expect(changeEvent).toHaveReceivedEventTimes(0);
       expect(await getDateInputValue(page)).toBe("3/7/");
     });
+
+    it("should emit change event only once when valueAsDate is parsed as Unix Time Stamp programmatically and user updates the date", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html` <calcite-input-date-picker></calcite-input-date-picker>`);
+
+      const inputDatePickerEl = await page.find("calcite-input-date-picker");
+      const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
+
+      await page.$eval("calcite-input-date-picker", (element: any) => {
+        element.valueAsDate = new Date(1687528800000);
+      });
+
+      expect(await inputDatePickerEl.getProperty("value")).toEqual("2023-06-23");
+      expect(await getDateInputValue(page)).toEqual("6/23/2023");
+      expect(changeEvent).toHaveReceivedEventTimes(0);
+
+      await inputDatePickerEl.click();
+      await page.waitForChanges();
+      await selectDayInMonth(page, 28);
+      await page.waitForChanges();
+
+      expect(await inputDatePickerEl.getProperty("value")).toEqual("2023-06-28");
+      expect(await getDateInputValue(page)).toEqual("6/28/2023");
+      expect(changeEvent).toHaveReceivedEventTimes(1);
+    });
   });
 
   it("should clear active date properly when deleted and committed via keyboard", async () => {

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -447,8 +447,12 @@ export class InputDatePicker
         this.warnAboutInvalidValue(this.value);
         this.value = "";
       }
-    } else if (this.range && this.valueAsDate) {
-      this.setRangeValue(this.valueAsDate as Date[]);
+    } else if (this.valueAsDate) {
+      if (this.range) {
+        this.setRangeValue(this.valueAsDate as Date[]);
+      } else if (!Array.isArray(this.valueAsDate)) {
+        this.value = dateToISO(this.valueAsDate);
+      }
     }
 
     if (this.min) {