From ccffc03e4d8a837df60886d287dd6a716c7fb7da Mon Sep 17 00:00:00 2001
From: Jose Carcamo <138070439+josercarcamo@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:16:19 -0800
Subject: [PATCH] fix(combobx): display selected item when initally opened
 (#11427)

**Related Issue:** #9890

## Summary
Scroll to display selected item when combobox is initially opened.
---
 .../src/components/combobox/combobox.e2e.ts   | 45 +++++++++++++++++++
 .../src/components/combobox/combobox.tsx      | 26 +++++------
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 01dd7e924bd..cfd32ce5569 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -2571,6 +2571,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 61a1ce6a003..93a9a5b8660 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -839,7 +839,7 @@ export class Combobox
         }
         event.preventDefault();
         this.updateActiveItemIndex(0);
-        this.scrollToActiveItem();
+        this.scrollToActiveOrSelectedItem();
         if (!this.comboboxInViewport()) {
           this.el.scrollIntoView();
         }
@@ -850,7 +850,7 @@ export class Combobox
         }
         event.preventDefault();
         this.updateActiveItemIndex(this.filteredItems.length - 1);
-        this.scrollToActiveItem();
+        this.scrollToActiveOrSelectedItem();
         if (!this.comboboxInViewport()) {
           this.el.scrollIntoView();
         }
@@ -901,11 +901,12 @@ export class Combobox
   }
 
   onBeforeOpen(): void {
-    this.scrollToActiveItem();
+    this.scrollToActiveOrSelectedItem();
     this.calciteComboboxBeforeOpen.emit();
   }
 
   onOpen(): void {
+    this.scrollToActiveOrSelectedItem(true);
     this.calciteComboboxOpen.emit();
   }
 
@@ -1366,27 +1367,24 @@ export class Combobox
     chip?.setFocus();
   }
 
-  private scrollToActiveItem(): void {
-    const activeItem = this.filteredItems[this.activeItemIndex];
+  private scrollToActiveOrSelectedItem(scrollToSelected = false): void {
+    const item =
+      scrollToSelected && this.selectedItems && this.selectedItems.length
+        ? this.selectedItems[0]
+        : this.filteredItems[this.activeItemIndex];
 
-    if (!activeItem) {
+    if (!item) {
       return;
     }
 
-    const height = this.calculateScrollerHeight(activeItem);
-    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;
-    }
+    item.scrollIntoView({ block: "nearest" });
   }
 
   private shiftActiveItemIndex(delta: number): void {
     const { length } = this.filteredItems;
     const newIndex = (this.activeItemIndex + length + delta) % length;
     this.updateActiveItemIndex(newIndex);
-    this.scrollToActiveItem();
+    this.scrollToActiveOrSelectedItem();
   }
 
   private updateActiveItemIndex(index: number): void {