diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index 3e49356c9ce..7fb78cc2f04 100644 --- 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 index 927ba5fc8e9..da0728e4774 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 @@ -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 { + 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 {