From 09febfe03dcd9ef08e7fe3f77f5b8ae0e7645d64 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Wed, 12 Feb 2025 16:26:05 -0800
Subject: [PATCH] refactor(combobox): used optional chaining; used html helper;
 removed unnecessary attributes from stories; added test for multiple; renamed
 variable

---
 .../src/components/combobox/combobox.e2e.ts   | 112 ++++++++++++------
 .../src/components/combobox/combobox.tsx      |   2 +-
 2 files changed, 75 insertions(+), 39 deletions(-)

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(`
-            <calcite-combobox
-                    open
-                    id="labelOne"
-                    label="test"
-                    placeholder="selected element (Black Eyed Susan) should be in view"
-                    max-items="6"
-                    selection-mode="single"
-                  >
-                    <calcite-combobox-item value="Trees" text-label="Trees">
-                      <calcite-combobox-item value="Pine" text-label="Pine">
-                        <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
-                      </calcite-combobox-item>
-                      <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
-                      <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
-                    </calcite-combobox-item>
-                    <calcite-combobox-item value="Flowers" text-label="Flowers">
-                      <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
-                      <calcite-combobox-item
-                        value="Black Eyed Susan"
-                        text-label="Black Eyed Susan"
-                        selected
-                      ></calcite-combobox-item>
-                      <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
-                    </calcite-combobox-item>
-                    <calcite-combobox-item value="Animals" text-label="Animals">
-                      <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
-                      <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
-                      <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
-                    </calcite-combobox-item>
-                    <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
-                    <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
-                    <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
-                  </calcite-combobox>
-            `);
+        await page.setContent(
+          html`<calcite-combobox open max-items="6" selection-mode="single">
+            <calcite-combobox-item value="Trees" text-label="Trees">
+              <calcite-combobox-item value="Pine" text-label="Pine">
+                <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+              </calcite-combobox-item>
+              <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+              <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Flowers" text-label="Flowers">
+              <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+              <calcite-combobox-item
+                value="Black Eyed Susan"
+                text-label="Black Eyed Susan"
+                selected
+              ></calcite-combobox-item>
+              <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Animals" text-label="Animals">
+              <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+              <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+              <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+            <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+            <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+          </calcite-combobox>`,
+        );
         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", () => {
           </calcite-combobox>`,
           "item3",
         ));
+
+      it("shows the selected item when initially opened with multiple selection", async () => {
+        const page = await newE2EPage();
+
+        await page.setContent(
+          html`<calcite-combobox open max-items="6" selection-mode="multiple">
+            <calcite-combobox-item value="Trees" text-label="Trees">
+              <calcite-combobox-item value="Pine" text-label="Pine">
+                <calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
+              </calcite-combobox-item>
+              <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+              <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Flowers" text-label="Flowers">
+              <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+              <calcite-combobox-item
+                value="Black Eyed Susan"
+                text-label="Black Eyed Susan"
+                selected
+              ></calcite-combobox-item>
+              <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Animals" text-label="Animals">
+              <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+              <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+              <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+            </calcite-combobox-item>
+            <calcite-combobox-item value="Rocks" text-label="Rocks" selected></calcite-combobox-item>
+            <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+            <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+          </calcite-combobox>`,
+        );
+        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 93a9a5b8660..77e74faf5b8 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1369,7 +1369,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];