# 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.
momentum-design · Jan 17, 2025 · 359e0e7 · 359e0e7
1 parent f982a27
commit 359e0e7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 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
@@ -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` <md-date-time-picker></md-date-time-picker>> `);
     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` <md-date-time-picker></md-date-time-picker>> `);
+    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
@@ -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
@@ -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` <md-datepicker></md-datepicker> `);
+    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
@@ -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,