fix(input-date-picker): display updated valueAsDate in the two range …

…inputs (#5758)

**Related Issue:** #5207 

## Summary

This PR fixes an issue where the input boxes are completely empty when
the `valueAsDate` property is directly changed with javascript when
using the `range` prop.

<!--

Please make sure the PR title and/or commit message adheres to the
https://www.conventionalcommits.org/en/v1.0.0/ specification.

Note: If your PR only has one commit and it is NOT semantic, you will
need to either

a. add another commit and wait for the check to update
b. proceed to squash merge, but make sure the commit message is the same
as the title.

This is because of the way GitHub handles single-commit squash merges
(see zeke/semantic-pull-requests#17)

If this is component-related, please verify that:

- [ ] feature or fix has a corresponding test
- [ ] changes have been tested with demo page in Edge

---

If this is skipping an unstable test:

- include info about the test failure
- submit an unstable-test issue by
[choosing](https://github.com/Esri/calcite-components/issues/new/choose)
the unstable test template and filling it out

-->

Co-authored-by: Erik Harper <eriklharper@pm.me>

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

@@ -414,6 +414,68 @@ describe("calcite-input-date-picker", () => {
     });
   });
 
+  it("should update this.value and input value when valueAsDate is set", 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");
+
+    await page.$eval("calcite-input-date-picker", (element: any) => {
+      element.valueAsDate = new Date("2022-10-1");
+    });
+
+    const expectedValue = "2022-10-01";
+    const expectedInputValue = "10/1/2022";
+
+    expect(await inputDatePickerEl.getProperty("value")).toEqual(expectedValue);
+
+    const inputValue = await page.evaluate(() => {
+      const inputDatePicker = document.querySelector("calcite-input-date-picker");
+      const calciteInput = inputDatePicker.shadowRoot.querySelector("calcite-input");
+      const input = calciteInput.shadowRoot.querySelector("input");
+      return input.value;
+    });
+
+    expect(inputValue).toEqual(expectedInputValue);
+  });
+
+  it("should update this.value and both input values when valueAsDate is set for range", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-input-date-picker range></calcite-input-date-picker>`);
+
+    const inputDatePickerEl = await page.find("calcite-input-date-picker");
+
+    await page.$eval("calcite-input-date-picker", (element: any) => {
+      element.valueAsDate = [new Date("2022-10-1"), new Date("2022-10-2")];
+    });
+
+    const expectedStartDateValue = "2022-10-01";
+    const expectedEndDateValue = "2022-10-02";
+    const expectedValue = [expectedStartDateValue, expectedEndDateValue];
+
+    expect(await inputDatePickerEl.getProperty("value")).toEqual(expectedValue);
+
+    const expectedStartDateInputValue = "10/1/2022";
+    const expectedEndDateInputValue = "10/2/2022";
+
+    const startDateInputValue = await page.evaluate(() => {
+      const inputDatePicker = document.querySelector("calcite-input-date-picker");
+      const calciteInput = inputDatePicker.shadowRoot.querySelector("calcite-input");
+      const input = calciteInput.shadowRoot.querySelector("input");
+      return input.value;
+    });
+
+    const endDateInputValue = await page.evaluate(() => {
+      const inputDatePicker = document.querySelector("calcite-input-date-picker");
+      const calciteInputs = inputDatePicker.shadowRoot.querySelectorAll("calcite-input");
+      const input = calciteInputs[1].shadowRoot.querySelector("input");
+      return input.value;
+    });
+
+    expect(startDateInputValue).toEqual(expectedStartDateInputValue);
+    expect(endDateInputValue).toEqual(expectedEndDateInputValue);
+  });
+
   it("should return endDate time as 23:59:999 when valueAsDate property is parsed", async () => {
     const page = await newE2EPage();
     await page.setContent(html` <calcite-input-date-picker layout="horizontal" range />`);

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

@@ -124,15 +124,21 @@ export class InputDatePicker
   @Watch("value")
   valueWatcher(newValue: string | string[]): void {
     if (!this.userChangedValue) {
+      let newValueAsDate;
       if (Array.isArray(newValue)) {
-        this.valueAsDate = getValueAsDateRange(newValue);
+        newValueAsDate = getValueAsDateRange(newValue);
         this.start = newValue[0];
         this.end = newValue[1];
       } else if (newValue) {
-        this.valueAsDate = dateFromISO(newValue);
+        newValueAsDate = dateFromISO(newValue);
       } else {
-        this.valueAsDate = undefined;
+        newValueAsDate = undefined;
       }
+
+      if (!this.valueAsDateChangedExternally && newValueAsDate !== this.valueAsDate) {
+        this.valueAsDate = newValueAsDate;
+      }
+
       this.localizeInputValues();
     }
     this.userChangedValue = false;
@@ -141,6 +147,15 @@ export class InputDatePicker
   @Watch("valueAsDate")
   valueAsDateWatcher(valueAsDate: Date): void {
     this.datePickerActiveDate = valueAsDate;
+    const newValue =
+      this.range && Array.isArray(valueAsDate)
+        ? [dateToISO(valueAsDate[0]), dateToISO(valueAsDate[1])]
+        : dateToISO(valueAsDate);
+    if (this.value !== newValue) {
+      this.valueAsDateChangedExternally = true;
+      this.value = newValue;
+      this.valueAsDateChangedExternally = false;
+    }
   }
 
   /**
@@ -468,6 +483,8 @@ export class InputDatePicker
       }
       this.start = "";
       this.end = "";
+    } else if (this.range && this.valueAsDate) {
+      this.setRangeValue(this.valueAsDate as Date[]);
     }
 
     if (this.start) {
@@ -697,6 +714,8 @@ export class InputDatePicker
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
+  private valueAsDateChangedExternally = false;
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods