diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index 3a4ee9af497..38831b0757d 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -367,9 +367,7 @@ describe("calcite-input-time-zone", () => { const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); - expect(await timeZoneItem.getProperty("textLabel")).toMatch( - toUserFriendlyName(getCity(testTimeZoneItems[1].name)), - ); + expect(await timeZoneItem.getProperty("textLabel")).toBe("Phoenix, United States"); }); it("ignores invalid values", async () => { @@ -386,9 +384,7 @@ describe("calcite-input-time-zone", () => { const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); - expect(await timeZoneItem.getProperty("textLabel")).toMatch( - toUserFriendlyName(getCity(testTimeZoneItems[0].name)), - ); + expect(await timeZoneItem.getProperty("textLabel")).toBe("Mexico City, Mexico"); }); it("properly sets region label when setting value programmatically", async () => { @@ -407,7 +403,7 @@ describe("calcite-input-time-zone", () => { const timeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); - expect(await timeZoneItem.getProperty("textLabel")).toMatch(toUserFriendlyName(getCity(region))); + expect(await timeZoneItem.getProperty("textLabel")).toBe("New York, United States"); }); it("maps deprecated time zones to aliases", async () => { diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx index 24d6b30f330..f8ecec0b30f 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx @@ -304,7 +304,6 @@ export class InputTimeZone } loaded(): void { - this.overrideSelectedLabelForRegion(this.open); this.openChanged(); } @@ -357,11 +356,6 @@ export class InputTimeZone this._value = normalized; this.selectedTimeZoneItem = timeZoneItem; - - if (normalized !== value) { - await this.updateComplete; - this.overrideSelectedLabelForRegion(this.open); - } } onLabelClick(): void { @@ -378,28 +372,23 @@ export class InputTimeZone * @param open * @private */ - private overrideSelectedLabelForRegion(open: boolean): void { + private overrideSelectedLabelForRegion(): void { if (this.mode !== "region" || !this.selectedTimeZoneItem) { return; } - const { label, metadata } = this.selectedTimeZoneItem; - - this.comboboxEl.selectedItems[0].textLabel = - !metadata.country || open - ? label - : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages); + this.comboboxEl.selectedItems[0].textLabel = this.getItemLabel(this.selectedTimeZoneItem); } private onComboboxBeforeClose(event: CustomEvent): void { event.stopPropagation(); - this.overrideSelectedLabelForRegion(false); + this.overrideSelectedLabelForRegion(); this.calciteInputTimeZoneBeforeClose.emit(); } private onComboboxBeforeOpen(event: CustomEvent): void { event.stopPropagation(); - this.overrideSelectedLabelForRegion(true); + this.overrideSelectedLabelForRegion(); this.calciteInputTimeZoneBeforeOpen.emit(); } @@ -486,6 +475,14 @@ export class InputTimeZone return value ? this.normalizer(value) : value; } + private getItemLabel(item: TimeZoneItem): string { + const selected = this.selectedTimeZoneItem === item; + const { label, metadata } = item; + return !this.open && item.metadata.country && selected + ? getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages) + : label; + } + //#endregion //#region Rendering @@ -556,7 +553,7 @@ export class InputTimeZone {items.map((item) => { const selected = this.selectedTimeZoneItem === item; const { label, metadata, value } = item; - + const textLabel = this.getItemLabel(item); return (