fix(combobx): display selected item when initally opened (#11427)

**Related Issue:** #9890 ## Summary Scroll to display selected item when combobox is initially opened.
Esri · Feb 1, 2025 · fcc4831 · fcc4831
1 parent d9071c8
commit fcc4831
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git 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
@@ -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 {