From c525beb2960bd0db79bc354fada098e487e62fb1 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 8 Jun 2023 13:50:16 -0700 Subject: [PATCH 1/3] fix(input-date-picker): Fix showing the placeholder when resetting the value. #6378 --- .../input-date-picker.e2e.ts | 20 +++++++++++++++++++ .../input-date-picker/input-date-picker.tsx | 14 +++++++++++-- 2 files changed, 32 insertions(+), 2 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 index fb24d506249..5c721ab68ee 100644 --- 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` `); + + 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 index 1aa60bb23fd..ea7dad08f36 100644 --- 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,8 +158,10 @@ export class InputDatePicker @Watch("value") valueWatcher(newValue: string | string[]): void { if (!this.userChangedValue) { - let newValueAsDate; - if (Array.isArray(newValue)) { + const valueIsArray = Array.isArray(newValue); + let newValueAsDate: Date | Date[]; + + if (valueIsArray) { newValueAsDate = getValueAsDateRange(newValue); } else if (newValue) { newValueAsDate = dateFromISO(newValue); @@ -167,12 +169,20 @@ export class InputDatePicker newValueAsDate = undefined; } + const { focusedInput } = this; + + this.setInputValue( + valueIsArray ? newValue[focusedInput === "end" ? 1 : 0] : newValue, + focusedInput + ); + if (!this.valueAsDateChangedExternally && newValueAsDate !== this.valueAsDate) { this.valueAsDate = newValueAsDate; } this.localizeInputValues(); } + this.userChangedValue = false; } From 159e6156478bf9e869c768edb5e19b0947707e88 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 12 Jun 2023 14:59:17 -0700 Subject: [PATCH 2/3] review fixes --- .../input-date-picker/input-date-picker.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) 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 index ea7dad08f36..6e646ba946e 100644 --- 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,10 +158,9 @@ export class InputDatePicker @Watch("value") valueWatcher(newValue: string | string[]): void { if (!this.userChangedValue) { - const valueIsArray = Array.isArray(newValue); let newValueAsDate: Date | Date[]; - if (valueIsArray) { + if (Array.isArray(newValue)) { newValueAsDate = getValueAsDateRange(newValue); } else if (newValue) { newValueAsDate = dateFromISO(newValue); @@ -169,13 +168,6 @@ export class InputDatePicker newValueAsDate = undefined; } - const { focusedInput } = this; - - this.setInputValue( - valueIsArray ? newValue[focusedInput === "end" ? 1 : 0] : newValue, - focusedInput - ); - if (!this.valueAsDateChangedExternally && newValueAsDate !== this.valueAsDate) { this.valueAsDate = newValueAsDate; } @@ -1006,8 +998,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 => { From b7a88e7a226247dd890aac855580545a9f1ef5c8 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 12 Jun 2023 15:05:31 -0700 Subject: [PATCH 3/3] cleanup --- .../src/components/input-date-picker/input-date-picker.tsx | 1 - 1 file changed, 1 deletion(-) 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 index 6e646ba946e..63bc29aa81d 100644 --- 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 @@ -174,7 +174,6 @@ export class InputDatePicker this.localizeInputValues(); } - this.userChangedValue = false; }