fix(input-time-zone): fix selected time zone label flicker and scroll delay for region mode

packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts

@@ -18,6 +18,7 @@ import { TagAndPage } from "../../tests/commonTests/interfaces";
 import { DEBOUNCE } from "../../utils/resources";
 import { findAll } from "../../tests/utils/puppeteer";
 import { mockConsole } from "../../tests/utils/logging";
+import { CSS as ComboboxCSS } from "../combobox/resources";
 import { getCity, toUserFriendlyName } from "./utils";
 
 /*
@@ -406,6 +407,34 @@ describe("calcite-input-time-zone", () => {
         expect(await timeZoneItem.getProperty("textLabel")).toBe("New York, United States");
       });
 
+      it("updates the label and shows selection immediately on user interaction", async () => {
+        const page = await newE2EPage();
+        await page.emulateTimezone(testTimeZoneItems[0].name);
+        await page.setContent(
+          // animation needed to reproduce update label delay
+          html`<calcite-input-time-zone mode="region"></calcite-input-time-zone>`,
+        );
+        const input = await page.find("calcite-input-time-zone");
+        const openSpy = await input.spyOnEvent("calciteInputTimeZoneOpen");
+
+        const timeZoneScrollerSelector = `calcite-input-time-zone >>> calcite-combobox >>> .${ComboboxCSS.listContainer}`;
+
+        // we use page click to avoid the internal call to waitForChanges that E2EElement interaction APIs have
+        await page.click("calcite-input-time-zone");
+        const scrollTop = await page.$eval(timeZoneScrollerSelector, (el) => el.scrollTop);
+
+        await openSpy.next();
+
+        expect(scrollTop).toEqual(await page.$eval(timeZoneScrollerSelector, (el) => el.scrollTop));
+
+        const testTimeZoneItemSelector = "calcite-input-time-zone >>> calcite-combobox-item[data-label='New York']";
+
+        // we use page click to avoid the internal call to waitForChanges that E2EElement interaction APIs have
+        await page.click(testTimeZoneItemSelector);
+
+        expect(await page.$eval(testTimeZoneItemSelector, async (el) => el.textLabel)).toBe("New York, United States");
+      });
+
       it("maps deprecated time zones to aliases", async () => {
         const deprecatedTimeZone1 = "Asia/Calcutta";
         const aliasTimeZone1 = "Asia/Kolkata";

packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

@@ -372,23 +372,23 @@ export class InputTimeZone
    * @param open
    * @private
    */
-  private overrideSelectedLabelForRegion(): void {
+  private overrideSelectedLabelForRegion(open: boolean): void {
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
     }
 
-    this.comboboxEl.selectedItems[0].textLabel = this.getItemLabel(this.selectedTimeZoneItem);
+    this.comboboxEl.selectedItems[0].textLabel = this.getItemLabel(this.selectedTimeZoneItem, open);
   }
 
   private onComboboxBeforeClose(event: CustomEvent): void {
     event.stopPropagation();
-    this.overrideSelectedLabelForRegion();
+    this.overrideSelectedLabelForRegion(false);
     this.calciteInputTimeZoneBeforeClose.emit();
   }
 
   private onComboboxBeforeOpen(event: CustomEvent): void {
     event.stopPropagation();
-    this.overrideSelectedLabelForRegion();
+    this.overrideSelectedLabelForRegion(true);
     this.calciteInputTimeZoneBeforeOpen.emit();
   }
 
@@ -475,12 +475,12 @@ export class InputTimeZone
     return value ? this.normalizer(value) : value;
   }
 
-  private getItemLabel(item: TimeZoneItem): string {
+  private getItemLabel(item: TimeZoneItem, open: boolean = this.open): string {
     const selected = this.selectedTimeZoneItem === item;
     const { label, metadata } = item;
-    return !this.open && item.metadata.country && selected
-      ? getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages)
-      : label;
+    return !metadata.country || open || !selected
+      ? label
+      : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
 
   //#endregion

packages/calcite-components/src/utils/openCloseComponent.ts

@@ -55,6 +55,8 @@ function isOpen(component: OpenCloseComponent): boolean {
  * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
  */
 export async function toggleOpenClose(component: OpenCloseComponent): Promise<void> {
+  await component.updateComplete;
+
   if (isOpen(component)) {
     component.onBeforeOpen();
   } else {