Skip to content

Commit 242fc49

Browse files
jcfrancobenelan
authored andcommitted
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.
1 parent 9bcb187 commit 242fc49

File tree

2 files changed

+21
-28
lines changed

2 files changed

+21
-28
lines changed

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
3232

3333
// #endregion
3434

35-
// #region Private Properties
36-
37-
private _selected = false;
38-
39-
// #endregion
40-
4135
// #region State Properties
4236

4337
@state() hasContent = false;
@@ -94,18 +88,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
9488
@property() scale: Scale = "m";
9589

9690
/** When `true`, the component is selected. */
97-
@property({ reflect: true })
98-
get selected(): boolean {
99-
return this._selected;
100-
}
101-
102-
set selected(selected: boolean) {
103-
const oldSelected = this._selected;
104-
if (selected !== oldSelected) {
105-
this._selected = selected;
106-
this.selectedWatchHandler();
107-
}
108-
}
91+
@property({ reflect: true }) selected: boolean = false;
10992

11093
/**
11194
* Specifies the selection mode of the component, where:
@@ -181,6 +164,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
181164
Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
182165
if (
183166
(changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) ||
167+
(changes.has("selected") && (this.hasUpdated || this.selected !== false)) ||
184168
changes.has("textLabel")
185169
) {
186170
this.calciteInternalComboboxItemChange.emit();
@@ -194,9 +178,6 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
194178
// #endregion
195179

196180
// #region Private Methods
197-
private selectedWatchHandler(): void {
198-
this.calciteComboboxItemChange.emit();
199-
}
200181

201182
private handleDefaultSlotChange(event: Event): void {
202183
this.hasContent = slotChangeHasContent(event);
@@ -210,6 +191,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
210191
}
211192

212193
this.selected = !this.selected;
194+
this.calciteComboboxItemChange.emit();
213195
}
214196

215197
private itemClickHandler(): void {

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export class InputTimeZone
300300
this.openChanged();
301301
}
302302

303-
if (changes.has("value") && this.hasUpdated && this.value !== changes.get("value")) {
303+
if (changes.has("value") && this.hasUpdated) {
304304
this.handleValueChange(this.value, changes.get("value"));
305305
}
306306
}
@@ -340,12 +340,12 @@ export class InputTimeZone
340340
}
341341
}
342342

343-
private handleValueChange(value: string, oldValue: string): void {
344-
value = this.normalizeValue(value);
343+
private async handleValueChange(value: string, oldValue: string): Promise<void> {
344+
const normalized = this.normalizeValue(value);
345345

346-
if (!value) {
346+
if (!normalized) {
347347
if (this.clearable) {
348-
this._value = value;
348+
this._value = normalized;
349349
this.selectedTimeZoneItem = null;
350350
return;
351351
}
@@ -355,14 +355,20 @@ export class InputTimeZone
355355
return;
356356
}
357357

358-
const timeZoneItem = this.findTimeZoneItem(value);
358+
const timeZoneItem = this.findTimeZoneItem(normalized);
359359

360360
if (!timeZoneItem) {
361361
this._value = oldValue;
362362
return;
363363
}
364364

365+
this._value = normalized;
365366
this.selectedTimeZoneItem = timeZoneItem;
367+
368+
if (normalized !== value) {
369+
await this.updateComplete;
370+
this.overrideSelectedLabelForRegion(this.open);
371+
}
366372
}
367373

368374
onLabelClick(): void {
@@ -380,16 +386,21 @@ export class InputTimeZone
380386
* @private
381387
*/
382388
private overrideSelectedLabelForRegion(open: boolean): void {
389+
console.log("ovd");
383390
if (this.mode !== "region" || !this.selectedTimeZoneItem) {
391+
console.log("bail");
384392
return;
385393
}
386394

387395
const { label, metadata } = this.selectedTimeZoneItem;
388396

389-
this.comboboxEl.selectedItems[0].textLabel =
397+
const lbl =
390398
!metadata.country || open
391399
? label
392400
: getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
401+
402+
console.log("label", lbl);
403+
this.comboboxEl.selectedItems[0].textLabel = lbl;
393404
}
394405

395406
private onComboboxBeforeClose(event: CustomEvent): void {

0 commit comments

Comments
 (0)