Skip to content

Commit cd5b92b

Browse files
authored
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.
1 parent 2d1a1e2 commit cd5b92b

File tree

2 files changed

+31
-2
lines changed

2 files changed

+31
-2
lines changed

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

+25
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,31 @@ describe("calcite-input-date-picker", () => {
262262
expect(changeEvent).toHaveReceivedEventTimes(0);
263263
expect(await getDateInputValue(page)).toBe("3/7/");
264264
});
265+
266+
it("should emit change event only once when valueAsDate is parsed as Unix Time Stamp programmatically and user updates the date", async () => {
267+
const page = await newE2EPage();
268+
await page.setContent(html` <calcite-input-date-picker></calcite-input-date-picker>`);
269+
270+
const inputDatePickerEl = await page.find("calcite-input-date-picker");
271+
const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
272+
273+
await page.$eval("calcite-input-date-picker", (element: any) => {
274+
element.valueAsDate = new Date(1687528800000);
275+
});
276+
277+
expect(await inputDatePickerEl.getProperty("value")).toEqual("2023-06-23");
278+
expect(await getDateInputValue(page)).toEqual("6/23/2023");
279+
expect(changeEvent).toHaveReceivedEventTimes(0);
280+
281+
await inputDatePickerEl.click();
282+
await page.waitForChanges();
283+
await selectDayInMonth(page, 28);
284+
await page.waitForChanges();
285+
286+
expect(await inputDatePickerEl.getProperty("value")).toEqual("2023-06-28");
287+
expect(await getDateInputValue(page)).toEqual("6/28/2023");
288+
expect(changeEvent).toHaveReceivedEventTimes(1);
289+
});
265290
});
266291

267292
it("should clear active date properly when deleted and committed via keyboard", async () => {

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -447,8 +447,12 @@ export class InputDatePicker
447447
this.warnAboutInvalidValue(this.value);
448448
this.value = "";
449449
}
450-
} else if (this.range && this.valueAsDate) {
451-
this.setRangeValue(this.valueAsDate as Date[]);
450+
} else if (this.valueAsDate) {
451+
if (this.range) {
452+
this.setRangeValue(this.valueAsDate as Date[]);
453+
} else if (!Array.isArray(this.valueAsDate)) {
454+
this.value = dateToISO(this.valueAsDate);
455+
}
452456
}
453457

454458
if (this.min) {

0 commit comments

Comments
 (0)