fix(input-time-zone): prevent items from being deselected (#7661)

**Related Issue:** #7530 ## Summary Leverages `combobox`'s new `single-persist` mode to avoid an error caused by deselecting an item.
Esri · Sep 5, 2023 · c2dd436 · c2dd436
1 parent c85b958
commit c2dd436
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
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
@@ -103,4 +103,21 @@ describe("calcite-input-time-zone", () => {
 
     expect(await timeZoneItem.getProperty("textLabel")).toMatch("GMT-6");
   });
+
+  it("does not allow users to deselect a timezone offset", async () => {
+    const page = await newE2EPage();
+    await page.emulateTimezone("America/Los_Angeles");
+    await page.setContent(html`<calcite-input-time-zone value="-360" open></calcite-input-time-zone>`);
+    await page.waitForChanges();
+
+    let selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
+    await selectedTimeZoneItem.click();
+    await page.waitForChanges();
+
+    selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
+    const input = await page.find("calcite-input-time-zone");
+
+    expect(await input.getProperty("value")).toBe("-360");
+    expect(await selectedTimeZoneItem.getProperty("textLabel")).toMatch("GMT-6");
+  });
 });
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
@@ -138,13 +138,6 @@ export class InputTimeZone
    */
   @Prop({ mutable: true }) value: string;
 
-  @Watch("value")
-  valueWatcher(value: string): void {
-    if (this.comboboxEl && this.comboboxEl.value !== value) {
-      this.comboboxEl.value = value;
-    }
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -316,7 +309,7 @@ export class InputTimeZone
           open={this.open}
           overlayPositioning={this.overlayPositioning}
           scale={this.scale}
-          selectionMode="single"
+          selectionMode="single-persist"
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={this.setComboboxRef}
         >