From 359e0e7df47e7727f4fbe669ba905a396c1ae6da Mon Sep 17 00:00:00 2001 From: cormacmchale1 Date: Fri, 17 Jan 2025 00:54:57 +0000 Subject: [PATCH] # CX-17328 - fix(release): update event flow for date picker (#1861) * fix(release): update event floe for date picker Events need to propogate to the UI impl on blank values for dates. * fix(release): update event floe for date picker Events need to propogate to the UI impl on blank values for dates. * fix(release): update event floe for date picker Events need to propogate to the UI impl on blank values for dates. --- .../date-time-picker/DateTimePicker.test.ts | 24 +++++++++++- .../date-time-picker/DateTimePicker.ts | 38 ++++++++++--------- .../components/datepicker/DatePicker.test.ts | 18 +++++++++ .../src/components/datepicker/DatePicker.ts | 5 +-- 4 files changed, 63 insertions(+), 22 deletions(-) diff --git a/web-components/src/components/date-time-picker/DateTimePicker.test.ts b/web-components/src/components/date-time-picker/DateTimePicker.test.ts index ac825b0011..32257bdef2 100644 --- a/web-components/src/components/date-time-picker/DateTimePicker.test.ts +++ b/web-components/src/components/date-time-picker/DateTimePicker.test.ts @@ -1,4 +1,4 @@ -import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers"; +import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers"; import { Settings } from "luxon"; import "./DateTimePicker"; import { DateTimePicker } from "./DateTimePicker"; @@ -34,4 +34,26 @@ describe("DateTimePicker Component", () => { const el: DateTimePicker.ELEMENT = await fixture(html` > `); expect(el?.getAttribute("ariaLabel")).toBeNull(); }); + + test("should fire date-time-change when a blank value is passed from date-input-change", async () => { + const el: DateTimePicker.ELEMENT = await fixture(html` > `); + el.value = "2021-01-01T00:00:00-08:00"; + expect(el?.getAttribute("ariaLabel")).toBeNull(); + const eventSpy = jest.spyOn(el, "dispatchEvent"); + el.handleDateTimeInputChange(new CustomEvent("date-input-change", { detail: { value: "" } })); + expect(el.value).toBe(""); + await elementUpdated(el); + expect(eventSpy).toHaveBeenCalledWith( + new CustomEvent(`date-time-change`, { + bubbles: true, + composed: true, + detail: { + dateTimeString: "", + dateTime: null, + locale: "en-US", + twentyFourHourFormat: false + } + }) + ); + }); }); diff --git a/web-components/src/components/date-time-picker/DateTimePicker.ts b/web-components/src/components/date-time-picker/DateTimePicker.ts index 6e985d1120..4bcb39d93b 100644 --- a/web-components/src/components/date-time-picker/DateTimePicker.ts +++ b/web-components/src/components/date-time-picker/DateTimePicker.ts @@ -63,8 +63,10 @@ export namespace DateTimePicker { protected updated(changedProperties: PropertyValues) { super.updated(changedProperties); - if (this.value && changedProperties.has("value")) { - this.parseValueForVisuals(this.value); + if (changedProperties.has("value")) { + if (this.value) { + this.parseValueForVisuals(this.value); + } if (!this.firstCycle) { this.updateDateTimeObject(); } else { @@ -98,9 +100,7 @@ export namespace DateTimePicker { }; handleDateTimeInputChange = (event: CustomEvent) => { - if (event?.detail?.value) { - this.value = event?.detail?.value; - } + this.value = event?.detail?.value; }; parseValueForVisuals = (value: string) => { @@ -113,19 +113,23 @@ export namespace DateTimePicker { updateDateTimeObject = () => { if (this.value) { this.fullDateTime = DateTime.fromISO(this.value, { locale: this.locale }); - this.dispatchEvent( - new CustomEvent(`date-time-change`, { - bubbles: true, - composed: true, - detail: { - dateTimeString: this.value, - dateTime: this.fullDateTime, - locale: this.locale, - twentyFourHourFormat: this.twentyFourHourFormat - } - }) - ); } + else{ + this.fullDateTime = DateTime.fromISO("", { locale: this.locale });; + } + + this.dispatchEvent( + new CustomEvent(`date-time-change`, { + bubbles: true, + composed: true, + detail: { + dateTimeString: this.value, + dateTime: this.fullDateTime, + locale: this.locale, + twentyFourHourFormat: this.twentyFourHourFormat + } + }) + ); }; combineDateAndTimeValues = (dateString: string | undefined, timeString: string) => { diff --git a/web-components/src/components/datepicker/DatePicker.test.ts b/web-components/src/components/datepicker/DatePicker.test.ts index f167d8af68..b3c296ac85 100644 --- a/web-components/src/components/datepicker/DatePicker.test.ts +++ b/web-components/src/components/datepicker/DatePicker.test.ts @@ -94,4 +94,22 @@ describe("DatePicker Component", () => { `); expect(el).not.toBeNull(); }); + + test("should update value and fire the date-input-change event when handleDateInputChange is called with an empty string", async () => { + const el: DatePicker.ELEMENT = await fixture(html` `); + const eventSpy = jest.spyOn(el, "dispatchEvent"); + const event = new CustomEvent("input-change", { detail: { value: "" } }); + el.handleDateInputChange(event); + expect(el.value).toBe(""); + expect(eventSpy).toHaveBeenCalledWith( + new CustomEvent("date-input-change",{ + bubbles: true, + composed: true, + detail: { + sourceEvent: event, + value: "" + } + }) + ); + }); }); diff --git a/web-components/src/components/datepicker/DatePicker.ts b/web-components/src/components/datepicker/DatePicker.ts index fcf3bbdcee..e7acb73acb 100644 --- a/web-components/src/components/datepicker/DatePicker.ts +++ b/web-components/src/components/datepicker/DatePicker.ts @@ -104,10 +104,7 @@ export namespace DatePicker { } handleDateInputChange = (event: CustomEvent) => { - if (event?.detail?.value) { - this.value = event?.detail?.value; - } - + this.value = event?.detail?.value; this.dispatchEvent( new CustomEvent("date-input-change", { bubbles: true,