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];