From c2dd4368c2707dcfdfeafb85d80e2f48706e0354 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 5 Sep 2023 10:03:08 -0700
Subject: [PATCH] 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.
---
 .../input-time-zone/input-time-zone.e2e.ts      | 17 +++++++++++++++++
 .../input-time-zone/input-time-zone.tsx         |  9 +--------
 2 files changed, 18 insertions(+), 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
index 8780b8d20d..21e772431c 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
@@ -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
index 2decb2cc1b..2ee842e585 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
@@ -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}
         >