From 5a4572584f4b0a6df56f73c1a4cfc5185d6748cb Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com>
Date: Thu, 31 Aug 2023 21:43:36 +0300
Subject: [PATCH] fix(ui5-select): scroll item into view on keyboard navigation
 (#7370)

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

Fixes: #7164
---
 packages/main/src/Select.ts             | 15 +++++++++++++++
 packages/main/test/specs/Select.spec.js | 18 ++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 740a28a222e7..3ddc7d0bde5f 100644
--- a/packages/main/src/Select.ts
+++ b/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() {
diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js
index 268152e03df1..3d306c439c99 100644
--- a/packages/main/test/specs/Select.spec.js
+++ b/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", () => {