fix(combobox): fix sporadic change event emitted on initialization (#…

…10952) **Related Issue:** #10731 ## Summary Tweaks initialization logic to prevent extraneous change event that happened after #10310.
Esri · Dec 4, 2024 · e84ed58 · e84ed58
1 parent 8890225
commit e84ed58
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -32,12 +32,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
 
   // #endregion
 
-  // #region Private Properties
-
-  private _selected = false;
-
-  // #endregion
-
   // #region State Properties
 
   @state() hasContent = false;
@@ -94,18 +88,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
   @property() scale: Scale = "m";
 
   /** When `true`, the component is selected. */
-  @property({ reflect: true })
-  get selected(): boolean {
-    return this._selected;
-  }
-
-  set selected(selected: boolean) {
-    const oldSelected = this._selected;
-    if (selected !== oldSelected) {
-      this._selected = selected;
-      this.selectedWatchHandler();
-    }
-  }
+  @property({ reflect: true }) selected: boolean = false;
 
   /**
    * Specifies the selection mode of the component, where:
@@ -181,6 +164,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
     if (
       (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) ||
+      (changes.has("selected") && (this.hasUpdated || this.selected !== false)) ||
       changes.has("textLabel")
     ) {
       this.calciteInternalComboboxItemChange.emit();
@@ -194,9 +178,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
   // #endregion
 
   // #region Private Methods
-  private selectedWatchHandler(): void {
-    this.calciteComboboxItemChange.emit();
-  }
 
   private handleDefaultSlotChange(event: Event): void {
     this.hasContent = slotChangeHasContent(event);
@@ -210,6 +191,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     }
 
     this.selected = !this.selected;
+    this.calciteComboboxItemChange.emit();
   }
 
   private itemClickHandler(): void {

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
@@ -300,7 +300,7 @@ export class InputTimeZone
       this.openChanged();
     }
 
-    if (changes.has("value") && this.hasUpdated && this.value !== changes.get("value")) {
+    if (changes.has("value") && this.hasUpdated) {
       this.handleValueChange(this.value, changes.get("value"));
     }
   }
@@ -340,12 +340,12 @@ export class InputTimeZone
     }
   }
 
-  private handleValueChange(value: string, oldValue: string): void {
-    value = this.normalizeValue(value);
+  private async handleValueChange(value: string, oldValue: string): Promise<void> {
+    const normalized = this.normalizeValue(value);
 
-    if (!value) {
+    if (!normalized) {
       if (this.clearable) {
-        this._value = value;
+        this._value = normalized;
         this.selectedTimeZoneItem = null;
         return;
       }
@@ -355,14 +355,20 @@ export class InputTimeZone
       return;
     }
 
-    const timeZoneItem = this.findTimeZoneItem(value);
+    const timeZoneItem = this.findTimeZoneItem(normalized);
 
     if (!timeZoneItem) {
       this._value = oldValue;
       return;
     }
 
+    this._value = normalized;
     this.selectedTimeZoneItem = timeZoneItem;
+
+    if (normalized !== value) {
+      await this.updateComplete;
+      this.overrideSelectedLabelForRegion(this.open);
+    }
   }
 
   onLabelClick(): void {
@@ -380,16 +386,21 @@ export class InputTimeZone
    * @private
    */
   private overrideSelectedLabelForRegion(open: boolean): void {
+    console.log("ovd");
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
+      console.log("bail");
       return;
     }
 
     const { label, metadata } = this.selectedTimeZoneItem;
 
-    this.comboboxEl.selectedItems[0].textLabel =
+    const lbl =
       !metadata.country || open
         ? label
         : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
+
+    console.log("label", lbl);
+    this.comboboxEl.selectedItems[0].textLabel = lbl;
   }
 
   private onComboboxBeforeClose(event: CustomEvent): void {