From b6b58307815f91ac93819360719d69fb46840ef1 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 16 Jan 2025 20:18:32 -0800 Subject: [PATCH 01/11] fix(combobox, input-time-zone): fix initial item selection delay --- .../src/components/combobox/combobox.e2e.ts | 29 ++++++++++-- .../src/components/combobox/combobox.tsx | 46 +++++++++---------- 2 files changed, 46 insertions(+), 29 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index d1c7495cc06..10bda42d6ee 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -1214,7 +1214,7 @@ describe("calcite-combobox", () => { `, ); - const eventSpy = await page.spyOnEvent("calciteComboboxChipClose", "window"); + const eventSpy = await page.spyOnEvent("calciteComboboxChipClose"); const chip = await page.find("calcite-combobox >>> calcite-chip"); @@ -1235,6 +1235,7 @@ describe("calcite-combobox", () => { `); const input = await page.find("calcite-combobox >>> input"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); await input.click(); await input.press("K"); @@ -1248,6 +1249,7 @@ describe("calcite-combobox", () => { expect((await combobox.getProperty("selectedItems")).length).toBe(1); expect(await item.getProperty("selected")).toBe(true); + expect(eventSpy).toHaveReceivedEventTimes(1); }); it("should replace current value to new custom value in single selection mode", async () => { @@ -1262,6 +1264,7 @@ describe("calcite-combobox", () => { await skipAnimations(page); const combobox = await page.find("calcite-combobox"); const input = await page.find("calcite-combobox >>> input"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); await input.click(); await input.press("K"); @@ -1276,6 +1279,7 @@ describe("calcite-combobox", () => { expect((await combobox.getProperty("selectedItems")).length).toBe(1); expect(await customValue.getProperty("selected")).toBe(true); expect(await item1.getProperty("selected")).toBe(false); + expect(eventSpy).toHaveReceivedEventTimes(1); }); it("should auto-select new custom values in multiple selection mode", async () => { @@ -1289,6 +1293,7 @@ describe("calcite-combobox", () => { `); const combobox = await page.find("calcite-combobox"); const input = await page.find("calcite-combobox >>> input"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); await input.click(); await input.press("K"); @@ -1306,6 +1311,7 @@ describe("calcite-combobox", () => { expect(await customValue.getProperty("selected")).toBe(true); expect(await item1.getProperty("selected")).toBe(true); expect(await item2.getProperty("selected")).toBe(true); + expect(eventSpy).toHaveReceivedEventTimes(1); }); }); @@ -1716,7 +1722,7 @@ describe("calcite-combobox", () => { }); it("should cycle through items on ArrowUp/ArrowDown and toggle selection on/off on Enter", async () => { - const eventSpy = await page.spyOnEvent("calciteComboboxChange", "window"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); const item1 = await page.find("calcite-combobox-item#one"); const item2 = await page.find("calcite-combobox-item#two"); const item3 = await page.find("calcite-combobox-item#three"); @@ -2013,6 +2019,7 @@ describe("calcite-combobox", () => { `); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); let chip = await page.find("calcite-combobox >>> calcite-chip"); expect(chip).toBeNull(); @@ -2021,6 +2028,7 @@ describe("calcite-combobox", () => { await element.press("K"); await element.press("Enter"); + expect(eventSpy).toHaveReceivedEventTimes(1); chip = await page.find("calcite-combobox >>> calcite-chip"); expect(chip).toBeDefined(); @@ -2032,6 +2040,7 @@ describe("calcite-combobox", () => { await element.press("Enter"); const chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect(chips.length).toBe(1); + expect(eventSpy).toHaveReceivedEventTimes(2); }); it("should fire calciteComboboxChange when entering new unknown tag", async () => { @@ -2049,6 +2058,7 @@ describe("calcite-combobox", () => { await input.press("K"); await input.press("Enter"); + await page.waitForChanges(); expect(eventSpy).toHaveReceivedEventTimes(1); }); @@ -2063,6 +2073,7 @@ describe("calcite-combobox", () => { `); const chip = await page.find("calcite-combobox >>> calcite-chip"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); expect(chip).toBeNull(); const input = await page.find("calcite-combobox >>> input"); @@ -2080,6 +2091,7 @@ describe("calcite-combobox", () => { let chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect(chips.length).toBe(1); + expect(eventSpy).toHaveReceivedEventTimes(1); await input.press("j"); await page.waitForChanges(); @@ -2092,6 +2104,7 @@ describe("calcite-combobox", () => { chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect(chips.length).toBe(2); + expect(eventSpy).toHaveReceivedEventTimes(2); }); it("should select known tag when input", async () => { @@ -2104,6 +2117,7 @@ describe("calcite-combobox", () => { `); let chip = await page.find("calcite-combobox >>> calcite-chip"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); expect(chip).toBeNull(); const input = await page.find("calcite-combobox >>> input"); @@ -2119,6 +2133,7 @@ describe("calcite-combobox", () => { expect(await chip.getProperty("value")).toBe("one"); const item1 = await page.find("calcite-combobox-item#one"); expect(await item1.getProperty("selected")).toBe(true); + expect(eventSpy).toHaveReceivedEventTimes(1); }); }); @@ -2398,8 +2413,9 @@ describe("calcite-combobox", () => { const page = await newE2EPage(); await page.setContent(html); await skipAnimations(page); + const openEvent = page.waitForEvent("calciteComboboxOpen"); await page.click("calcite-combobox"); - await page.waitForChanges(); + await openEvent; const activeItem = await page.find("calcite-combobox-item[active]"); expect(await activeItem.getProperty("value")).toBe(expectedActiveItemValue); @@ -2507,12 +2523,12 @@ describe("calcite-combobox", () => { async function assertClickOutside(selectionMode = "multiple", allowCustomValues = false): Promise { const combobox = await page.find("calcite-combobox"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); combobox.setProperty("selectionMode", selectionMode); combobox.setProperty("allowCustomValues", allowCustomValues); + await page.waitForChanges(); const inputEl = await page.find(`#myCombobox >>> input`); - await inputEl.focus(); - await page.waitForChanges(); expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox"); const comboboxRect = await page.evaluate(() => { @@ -2530,6 +2546,7 @@ describe("calcite-combobox", () => { expect(await page.evaluate(() => document.activeElement.id)).not.toBe("myCombobox"); expect(await inputEl.getProperty("value")).toBe(""); expect(await combobox.getProperty("value")).toBe(allowCustomValues ? "three" : ""); + expect(eventSpy).toHaveReceivedEventTimes(allowCustomValues ? 1 : 0); } selectionModes.forEach((mode) => { @@ -2558,6 +2575,7 @@ describe("calcite-combobox", () => { async function clearInputValueOnBlur(selectionMode = "multiple", allowCustomValues = false): Promise { const combobox = await page.find("calcite-combobox"); + const eventSpy = await page.spyOnEvent("calciteComboboxChange"); combobox.setProperty("selectionMode", selectionMode); combobox.setProperty("allowCustomValues", allowCustomValues); const inputEl = await page.find(`#myCombobox >>> input`); @@ -2572,6 +2590,7 @@ describe("calcite-combobox", () => { await page.waitForChanges(); expect(await inputEl.getProperty("value")).toBe(""); expect(await combobox.getProperty("value")).toBe(allowCustomValues ? "three" : ""); + expect(eventSpy).toHaveReceivedEventTimes(allowCustomValues ? 1 : 0); } selectionModes.forEach((mode) => { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index fa4d5740bb8..3cc5ef73019 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -107,10 +107,6 @@ export class Combobox // #region Private Properties - private internalComboboxChangeEvent = (): void => { - this.calciteComboboxChange.emit(); - }; - private allSelectedIndicatorChipEl: Chip["el"]; private chipContainerEl: HTMLDivElement; @@ -119,7 +115,9 @@ export class Combobox defaultValue: Combobox["value"]; - private emitComboboxChange = debounce(this.internalComboboxChangeEvent, 0); + private emitComboboxChange(): void { + this.calciteComboboxChange.emit(); + } private get effectiveFilterProps(): string[] { if (!this.filterProps) { @@ -658,14 +656,14 @@ export class Combobox private valueHandler(value: string | string[]): void { if (!this.internalValueChangeFlag) { - const items = this.getItems(); - if (Array.isArray(value)) { - items.forEach((item) => (item.selected = value.includes(item.value))); - } else if (value) { - items.forEach((item) => (item.selected = value === item.value)); - } else { - items.forEach((item) => (item.selected = false)); - } + this.getItems().forEach((item) => { + item.selected = Array.isArray(value) + ? value.includes(item.value) + : value + ? value === item.value + : false; + }); + this.updateItems(); } } @@ -718,7 +716,9 @@ export class Combobox event: CustomEvent, ): void { event.stopPropagation(); - this.updateItems(); + if (this.hasUpdated) { + this.updateItems(); + } } private clearValue(): void { @@ -1229,15 +1229,19 @@ export class Combobox return this.filterText === "" ? this.items : this.items.filter((item) => !item.hidden); } - private updateItems = debounce((): void => { + private updateItems(): void { this.items = this.getItems(); this.groupItems = this.getGroupItems(); this.data = this.getData(); this.groupData = this.getGroupData(); + + this.updateItemProps(); this.selectedItems = this.getSelectedItems(); this.filteredItems = this.getFilteredItems(); this.needsIcon = this.getNeedsIcon(); + } + private updateItemProps(): void { this.items.forEach((item) => { item.selectionMode = this.selectionMode; item.scale = this.scale; @@ -1260,7 +1264,7 @@ export class Combobox nextGroupItem.afterEmptyGroup = groupItem.children.length === 0; } }); - }, DEBOUNCE.nextTick); + } private getData(): ItemData[] { return this.items.map((item) => ({ @@ -1308,9 +1312,6 @@ export class Combobox if (existingItem) { this.toggleSelection(existingItem, true); } else { - if (!this.isMulti()) { - this.toggleSelection(this.selectedItems[this.selectedItems.length - 1], false); - } const item = document.createElement( // TODO: [MIGRATION] If this is dynamically creating a web component, please read the docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-jsx--docs#rendering-jsx-outside-the-component "calcite-combobox-item", @@ -1319,14 +1320,11 @@ export class Combobox item.heading = value; item.selected = true; this.el.prepend(item); - this.resetText(); + this.toggleSelection(item, true); + this.open = true; if (focus) { this.setFocus(); } - this.updateItems(); - this.filterItems(""); - this.open = true; - this.emitComboboxChange(); } } From c7db265532084e0ab0537bba6d3790a499566b42 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 17 Jan 2025 10:44:33 -0800 Subject: [PATCH 02/11] tidy up --- .../calcite-components/src/components/combobox/combobox.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 3cc5ef73019..3bb17b0fb6f 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -657,11 +657,7 @@ export class Combobox private valueHandler(value: string | string[]): void { if (!this.internalValueChangeFlag) { this.getItems().forEach((item) => { - item.selected = Array.isArray(value) - ? value.includes(item.value) - : value - ? value === item.value - : false; + item.selected = Array.isArray(value) ? value.includes(item.value) : value === item.value; }); this.updateItems(); From ffc7ee8ddfd119b6af81bebfca8978d31349191e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 17 Jan 2025 13:28:32 -0800 Subject: [PATCH 03/11] update items w/ willUpdate after loaded item update --- .../calcite-components/src/components/combobox/combobox.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 3bb17b0fb6f..cd9c61cdd1b 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -589,7 +589,7 @@ export class Combobox this.reposition(true); } - if (changes.has("selectionMode") || changes.has("scale")) { + if (this.hasUpdated && (changes.has("selectionMode") || changes.has("scale"))) { this.updateItems(); } @@ -619,6 +619,7 @@ export class Combobox afterConnectDefaultValueSet(this, this.getValue()); connectFloatingUI(this); setComponentLoaded(this); + this.updateItems(); } override disconnectedCallback(): void { From ce7054c26b93a883afd20f64c189b9ad150b8f4f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 01:11:23 -0800 Subject: [PATCH 04/11] remove unused prop and method --- .../src/components/combobox/combobox.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index cd9c61cdd1b..1b63a7a7185 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -280,8 +280,6 @@ export class Combobox @state() items: HTMLCalciteComboboxItemElement["el"][] = []; - @state() needsIcon: boolean; - @state() selectedHiddenChipsCount = 0; @state() selectedVisibleChipsCount = 0; @@ -1235,7 +1233,6 @@ export class Combobox this.updateItemProps(); this.selectedItems = this.getSelectedItems(); this.filteredItems = this.getFilteredItems(); - this.needsIcon = this.getNeedsIcon(); } private updateItemProps(): void { @@ -1282,10 +1279,6 @@ export class Combobox })); } - private getNeedsIcon(): boolean { - return isSingleLike(this.selectionMode) && this.items.some((item) => item.icon); - } - private resetText(): void { if (this.textInput.value) { this.textInput.value.value = ""; From 6446fb61d9d017bddd0b9164a5ef37b28c81ea92 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 01:38:44 -0800 Subject: [PATCH 05/11] remove state from non-rendering props --- .../calcite-components/src/components/combobox/combobox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 1b63a7a7185..972f6660b63 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -276,9 +276,9 @@ export class Combobox @state() compactSelectionDisplay = false; - @state() groupItems: HTMLCalciteComboboxItemGroupElement["el"][] = []; + groupItems: HTMLCalciteComboboxItemGroupElement["el"][] = []; - @state() items: HTMLCalciteComboboxItemElement["el"][] = []; + items: HTMLCalciteComboboxItemElement["el"][] = []; @state() selectedHiddenChipsCount = 0; From ae495540d8bb8447626a91bde4e498ed8f4fb04e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 01:39:18 -0800 Subject: [PATCH 06/11] allow providing scope of item updates --- .../src/components/combobox/combobox.tsx | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 972f6660b63..d5eecbe5fcb 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -600,7 +600,7 @@ export class Combobox } } - override updated(): void { + override updated(changes: PropertyValues): void { if (this.el.offsetHeight !== this.inputHeight) { this.reposition(true); this.inputHeight = this.el.offsetHeight; @@ -611,6 +611,10 @@ export class Combobox if (!this.hasUpdated) { this.refreshSelectionDisplay(); } + + if (changes.has("selectionMode") || changes.has("scale")) { + this.updateItems(["items", "item-props"]); + } } loaded(): void { @@ -1224,15 +1228,27 @@ export class Combobox return this.filterText === "" ? this.items : this.items.filter((item) => !item.hidden); } - private updateItems(): void { - this.items = this.getItems(); - this.groupItems = this.getGroupItems(); - this.data = this.getData(); - this.groupData = this.getGroupData(); + private updateItems( + scope: "all" | ("items" | "data" | "selection" | "item-props")[] = "all", + ): void { + if (scope === "all" || scope.includes("items")) { + this.items = this.getItems(); + this.groupItems = this.getGroupItems(); + } + + if (scope === "all" || scope.includes("data")) { + this.data = this.getData(); + this.groupData = this.getGroupData(); + } - this.updateItemProps(); - this.selectedItems = this.getSelectedItems(); - this.filteredItems = this.getFilteredItems(); + if (scope === "all" || scope.includes("item-props")) { + this.updateItemProps(); + } + + if (scope === "all" || scope.includes("selection")) { + this.selectedItems = this.getSelectedItems(); + this.filteredItems = this.getFilteredItems(); + } } private updateItemProps(): void { From d43f04d625149f865c31bae546fefb5326d4d525 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 01:39:30 -0800 Subject: [PATCH 07/11] tidy up --- packages/calcite-components/src/components/combobox/combobox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index d5eecbe5fcb..7c6e3997737 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -930,6 +930,7 @@ export class Combobox listContainerEl.style.inlineSize = `${referenceEl.clientWidth}px`; await this.reposition(true); } + private calciteChipCloseHandler(comboboxItem: HTMLCalciteComboboxItemElement["el"]): void { this.open = false; From 77db412b680f668aedbae0a40dee36554fe2af02 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 01:40:31 -0800 Subject: [PATCH 08/11] tidy up --- .../src/components/combobox/combobox.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 7c6e3997737..fb053bb82d0 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -214,6 +214,8 @@ export class Combobox private groupData: GroupData[]; + private groupItems: HTMLCalciteComboboxItemGroupElement["el"][] = []; + private guid = guid(); private ignoreSelectedEventsFlag = false; @@ -222,6 +224,8 @@ export class Combobox private internalValueChangeFlag = false; + private items: HTMLCalciteComboboxItemElement["el"][] = []; + labelEl: Label["el"]; private listContainerEl: HTMLDivElement; @@ -276,10 +280,6 @@ export class Combobox @state() compactSelectionDisplay = false; - groupItems: HTMLCalciteComboboxItemGroupElement["el"][] = []; - - items: HTMLCalciteComboboxItemElement["el"][] = []; - @state() selectedHiddenChipsCount = 0; @state() selectedVisibleChipsCount = 0; From 94f580db5868844ce0415681f72c2c5218b41da4 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 02:06:22 -0800 Subject: [PATCH 09/11] tidy up --- .../calcite-components/src/components/combobox/combobox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index fb053bb82d0..9c01bc05f29 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -613,7 +613,7 @@ export class Combobox } if (changes.has("selectionMode") || changes.has("scale")) { - this.updateItems(["items", "item-props"]); + this.updateItems(["items", "props"]); } } @@ -1230,7 +1230,7 @@ export class Combobox } private updateItems( - scope: "all" | ("items" | "data" | "selection" | "item-props")[] = "all", + scope: "all" | ("items" | "data" | "selection" | "itemprops")[] = "all", ): void { if (scope === "all" || scope.includes("items")) { this.items = this.getItems(); @@ -1242,7 +1242,7 @@ export class Combobox this.groupData = this.getGroupData(); } - if (scope === "all" || scope.includes("item-props")) { + if (scope === "all" || scope.includes("props")) { this.updateItemProps(); } From 7f18667ebb035440034f23ec94bea1f022996082 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 02:17:56 -0800 Subject: [PATCH 10/11] fix typo --- .../calcite-components/src/components/combobox/combobox.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 9c01bc05f29..3acef7ab9d7 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1229,9 +1229,7 @@ export class Combobox return this.filterText === "" ? this.items : this.items.filter((item) => !item.hidden); } - private updateItems( - scope: "all" | ("items" | "data" | "selection" | "itemprops")[] = "all", - ): void { + private updateItems(scope: "all" | ("items" | "data" | "selection" | "props")[] = "all"): void { if (scope === "all" || scope.includes("items")) { this.items = this.getItems(); this.groupItems = this.getGroupItems(); From 9b1a4d6535957e300fbb8da195469e940a3677ab Mon Sep 17 00:00:00 2001 From: JC Franco Date: Sat, 18 Jan 2025 02:32:37 -0800 Subject: [PATCH 11/11] restore refreshSelectionDisplay() --- .../calcite-components/src/components/combobox/combobox.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 3acef7ab9d7..941d1663c23 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -608,13 +608,11 @@ export class Combobox updateHostInteraction(this); - if (!this.hasUpdated) { - this.refreshSelectionDisplay(); - } - if (changes.has("selectionMode") || changes.has("scale")) { this.updateItems(["items", "props"]); } + + this.refreshSelectionDisplay(); } loaded(): void {