diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx index 9ed811899860..e92e365fe910 100644 --- a/packages/main/cypress/specs/ComboBox.cy.tsx +++ b/packages/main/cypress/specs/ComboBox.cy.tsx @@ -3,6 +3,64 @@ import ComboBoxItem from "../../src/ComboBoxItem.js"; import ComboBoxItemGroup from "../../src/ComboBoxItemGroup.js"; import Link from "../../src/Link.js"; import Input from "../../src/Input.js"; +import Button from "../../src/Button.js"; + +describe("General Interaction", () => { + it("Scrolls the selected item into view after opening the popover", () => { + cy.mount( + <> + + + + + + + + + + + ); + cy.viewport(500,200); + + cy.get("[ui5-combobox]") + .shadow() + .find("[ui5-icon]") + .as("dropdownIcon"); + + cy.get("@dropdownIcon") + .realClick(); + + cy.get("[ui5-combobox]") + .shadow() + .find("[ui5-responsive-popover]") + .shadow() + .find(".ui5-popup-content") + .as("scrollContainer"); + + cy.get("@scrollContainer") + .scrollTo("bottom"); + + cy.get("[ui5-cb-item") + .eq(4) + .realClick(); + + cy.get("@dropdownIcon") + .realClick(); + + cy.get("@scrollContainer") + .scrollTo("top"); + + cy.get("[ui5-button]") + .realClick(); + + cy.get("@dropdownIcon") + .realClick(); + + cy.get("[ui5-cb-item]") + .eq(4) + .should("be.visible"); + }) +}) describe("Security", () => { it("tests setting malicious text to items", () => { diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index efae83073a6b..7ee2a4faf730 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -578,6 +578,15 @@ class ComboBox extends UI5Element implements IFormInputElement { this._iconPressed = true; this.inner.focus(); this.fireDecoratorEvent("open"); + + const allItems = this._getItems(); + const currentItem = allItems.find(item => { + return item.selected || item.focused; + }); + + if (currentItem) { + this._scrollToItem(allItems.indexOf(currentItem)); + } } _afterClosePopover() {