From 481b8ff4085be71a2c8b1ca576579cb81a06fff7 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Fri, 31 Jan 2025 12:54:48 -0800
Subject: [PATCH 1/2] fix(combobx): display selected item when initally opened

---
 .../src/components/combobox/combobox.e2e.ts   | 45 +++++++++++++++++++
 .../src/components/combobox/combobox.tsx      | 28 +++++++-----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 80c18f80327..201f5dd7027 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -2535,6 +2535,51 @@ describe("calcite-combobox", () => {
           </calcite-combobox>`,
           "item3",
         ));
+
+      it("shows the selected item when initially opened", 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.waitForChanges();
+        const combobox = await page.find("calcite-combobox");
+        const item1 = await combobox.find("calcite-combobox-item[value='Black Eyed Susan']");
+
+        expect(await item1.isIntersectingViewport()).toBeTruthy();
+      });
     });
 
     describe("multiple-selection", () => {
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 0f074d38c3d..83873d222ab 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -840,7 +840,7 @@ export class Combobox
         }
         event.preventDefault();
         this.updateActiveItemIndex(0);
-        this.scrollToActiveItem();
+        this.scrollToActiveOrSelectedItem();
         if (!this.comboboxInViewport()) {
           this.el.scrollIntoView();
         }
@@ -851,7 +851,7 @@ export class Combobox
         }
         event.preventDefault();
         this.updateActiveItemIndex(this.filteredItems.length - 1);
-        this.scrollToActiveItem();
+        this.scrollToActiveOrSelectedItem();
         if (!this.comboboxInViewport()) {
           this.el.scrollIntoView();
         }
@@ -902,11 +902,12 @@ export class Combobox
   }
 
   onBeforeOpen(): void {
-    this.scrollToActiveItem();
+    this.scrollToActiveOrSelectedItem();
     this.calciteComboboxBeforeOpen.emit();
   }
 
   onOpen(): void {
+    this.scrollToActiveOrSelectedItem(true);
     this.calciteComboboxOpen.emit();
   }
 
@@ -1367,19 +1368,22 @@ export class Combobox
     chip?.setFocus();
   }
 
-  private scrollToActiveItem(): void {
-    const activeItem = this.filteredItems[this.activeItemIndex];
+  private scrollToActiveOrSelectedItem(selected = false): void {
+    const item =
+      selected && this.selectedItems && this.selectedItems.length
+        ? this.selectedItems[0]
+        : this.filteredItems[this.activeItemIndex];
 
-    if (!activeItem) {
+    if (!item) {
       return;
     }
 
-    const height = this.calculateScrollerHeight(activeItem);
+    const height = this.calculateScrollerHeight(item);
     const { offsetHeight, scrollTop } = this.listContainerEl;
-    if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
-      this.listContainerEl.scrollTop = activeItem.offsetTop - offsetHeight + height;
-    } else if (activeItem.offsetTop < scrollTop) {
-      this.listContainerEl.scrollTop = activeItem.offsetTop;
+    if (offsetHeight + scrollTop < item.offsetTop + height) {
+      this.listContainerEl.scrollTop = item.offsetTop - offsetHeight + height;
+    } else if (item.offsetTop < scrollTop) {
+      this.listContainerEl.scrollTop = item.offsetTop;
     }
   }
 
@@ -1387,7 +1391,7 @@ export class Combobox
     const { length } = this.filteredItems;
     const newIndex = (this.activeItemIndex + length + delta) % length;
     this.updateActiveItemIndex(newIndex);
-    this.scrollToActiveItem();
+    this.scrollToActiveOrSelectedItem();
   }
 
   private updateActiveItemIndex(index: number): void {

From 7d3295dd2de997388b927f736e9f22a6be899d56 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Fri, 31 Jan 2025 15:33:49 -0800
Subject: [PATCH 2/2] Removed the calculation of scrolling offset which was
 unnecessary per code review

---
 .../src/components/combobox/combobox.tsx             | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 83873d222ab..39a04d18b0f 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1368,9 +1368,9 @@ export class Combobox
     chip?.setFocus();
   }
 
-  private scrollToActiveOrSelectedItem(selected = false): void {
+  private scrollToActiveOrSelectedItem(scrollToSelected = false): void {
     const item =
-      selected && this.selectedItems && this.selectedItems.length
+      scrollToSelected && this.selectedItems && this.selectedItems.length
         ? this.selectedItems[0]
         : this.filteredItems[this.activeItemIndex];
 
@@ -1378,13 +1378,7 @@ export class Combobox
       return;
     }
 
-    const height = this.calculateScrollerHeight(item);
-    const { offsetHeight, scrollTop } = this.listContainerEl;
-    if (offsetHeight + scrollTop < item.offsetTop + height) {
-      this.listContainerEl.scrollTop = item.offsetTop - offsetHeight + height;
-    } else if (item.offsetTop < scrollTop) {
-      this.listContainerEl.scrollTop = item.offsetTop;
-    }
+    item.scrollIntoView({ block: "nearest" });
   }
 
   private shiftActiveItemIndex(delta: number): void {