diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index cfd32ce5569..9a19ae3cc1e 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -2572,49 +2572,43 @@ describe("calcite-combobox", () => { "item3", )); - it("shows the selected item when initially opened", async () => { + it("shows the selected item when initially opened with single selection", async () => { const page = await newE2EPage(); - await page.setContent(` - - - - - - - - - - - - - - - - - - - - - - - `); + await page.setContent( + html` + + + + + + + + + + + + + + + + + + + + + `, + ); await page.waitForChanges(); const combobox = await page.find("calcite-combobox"); - const item1 = await combobox.find("calcite-combobox-item[value='Black Eyed Susan']"); + const selectedItem = await combobox.find("calcite-combobox-item[value='Black Eyed Susan']"); - expect(await item1.isIntersectingViewport()).toBeTruthy(); + expect(await selectedItem.isIntersectingViewport()).toBeTruthy(); + expect(await selectedItem.getProperty("selected")).toBeTruthy(); }); }); @@ -2638,6 +2632,48 @@ describe("calcite-combobox", () => { `, "item3", )); + + it("shows the selected item when initially opened with multiple selection", async () => { + const page = await newE2EPage(); + + await page.setContent( + html` + + + + + + + + + + + + + + + + + + + + + `, + ); + await page.waitForChanges(); + const combobox = await page.find("calcite-combobox"); + const firstSelectedItem = await combobox.find("calcite-combobox-item[value='Black Eyed Susan']"); + const secondSelectedItem = await combobox.find("calcite-combobox-item[value='Rocks']"); + + expect(await firstSelectedItem.isIntersectingViewport()).toBeTruthy(); + expect(await secondSelectedItem.isIntersectingViewport()).toBeFalsy(); + expect(await firstSelectedItem.getProperty("selected")).toBeTruthy(); + expect(await secondSelectedItem.getProperty("selected")).toBeTruthy(); + }); }); describe("ancestors-selection", () => { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 8db3b0b67c2..9c526e5d42b 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1357,7 +1357,7 @@ export class Combobox private scrollToActiveOrSelectedItem(scrollToSelected = false): void { const item = - scrollToSelected && this.selectedItems && this.selectedItems.length + scrollToSelected && this.selectedItems?.length ? this.selectedItems[0] : this.filteredItems[this.activeItemIndex];