fix(ui5-select): scroll item into view on keyboard navigation (#7370)

* fix(ui5-select): scroll item into view on keyboard navigation

Fixes: #7164

Author: kgogov

packages/main/src/Select.ts

@@ -816,6 +816,19 @@ class Select extends UI5Element implements IFormElement {
 		this._toggleRespPopover();
 	}
 
+	_scrollSelectedItem() {
+		if (this._isPickerOpen) {
+			const itemRef = this._currentlySelectedOption.getDomRef();
+			if (itemRef) {
+				itemRef.scrollIntoView({
+					behavior: "auto",
+					block: "nearest",
+					inline: "nearest",
+				});
+			}
+		}
+	}
+
 	_handleArrowNavigation(e: KeyboardEvent) {
 		let nextIndex = -1;
 		const currentIndex = this._selectedIndex;
@@ -835,6 +848,7 @@ class Select extends UI5Element implements IFormElement {
 			// The aria-activedescendents attribute can't be used,
 			// because listitem elements are in different shadow dom
 			this.itemSelectionAnnounce();
+			this._scrollSelectedItem();
 		}
 	}
 
@@ -882,6 +896,7 @@ class Select extends UI5Element implements IFormElement {
 		this.opened = true;
 		this.fireEvent<CustomEvent>("open");
 		this.itemSelectionAnnounce();
+		this._scrollSelectedItem();
 	}
 
 	_afterClose() {

packages/main/test/specs/Select.spec.js

@@ -540,6 +540,24 @@ describe("Select general interaction", () => {
 		await firstItem.click();
 		assert.notOk(await popover.getProperty("opened"), "Select is closed.");
 	});
+
+	it("Tests if currently selected option is visible in the viewport when keyboard navigation is used", async () => {
+		await browser.setWindowSize(600, 100);
+
+		const select = await browser.$("#warningSelect");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#warningSelect");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		await select.click();
+		assert.ok(await popover.getProperty("opened"), "Select is opened.");
+
+		await select.keys("ArrowDown");
+		await select.keys("ArrowDown");
+		await select.keys("ArrowDown");
+
+		const selectedOption = await popover.$("ui5-list").$("ui5-li[selected]");
+		assert.ok(await selectedOption.isClickable(), "Selected option is visible in the viewport.");
+	});
 });
 
 describe("Attributes propagation", () => {