fix(input-date-picker): Fix showing the placeholder when resetting th…

…e value (#7156) **Related Issue:** #6378 ## Summary - Updates internal input's value when the value on the input-date-picker is changed. - Adds a test
Esri · Jun 14, 2023 · 8d60ffd · 8d60ffd
1 parent 5131bd6
commit 8d60ffd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 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
@@ -805,4 +805,24 @@ describe("calcite-input-date-picker", () => {
       expect(await getFocusedElementProp(page, "id")).toBe("next-sibling");
     });
   });
+
+  it("should reset input value", async () => {
+    const page = await newE2EPage();
+    const expectedValue = "2022-10-01";
+    const expectedInputValue = "10/1/2022";
+
+    await page.setContent(html` <calcite-input-date-picker value="${expectedValue}"></calcite-input-date-picker>`);
+
+    const inputDatePickerEl = await page.find("calcite-input-date-picker");
+    const input = await page.find("calcite-input-date-picker >>> calcite-input");
+
+    expect(await inputDatePickerEl.getProperty("value")).toEqual(expectedValue);
+    expect(await input.getProperty("value")).toEqual(expectedInputValue);
+
+    inputDatePickerEl.setProperty("value", "");
+    await page.waitForChanges();
+
+    expect(await inputDatePickerEl.getProperty("value")).toEqual("");
+    expect(await input.getProperty("value")).toEqual("");
+  });
 });
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
@@ -158,7 +158,8 @@ export class InputDatePicker
   @Watch("value")
   valueWatcher(newValue: string | string[]): void {
     if (!this.userChangedValue) {
-      let newValueAsDate;
+      let newValueAsDate: Date | Date[];
+
       if (Array.isArray(newValue)) {
         newValueAsDate = getValueAsDateRange(newValue);
       } else if (newValue) {
@@ -996,8 +997,8 @@ export class InputDatePicker
     const localizedEndDate =
       endDate && this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale));
 
-    localizedDate && this.setInputValue(localizedDate, "start");
-    this.range && localizedEndDate && this.setInputValue(localizedEndDate, "end");
+    this.setInputValue(localizedDate ?? "", "start");
+    this.setInputValue((this.range && localizedEndDate) ?? "", "end");
   }
 
   private setInputValue = (newValue: string, input: "start" | "end" = "start"): void => {