From 00c308fa82019ae163b99a546acdb246d3eb4a64 Mon Sep 17 00:00:00 2001
From: Nikolay Deshev <nikolay.deshev@sap.com>
Date: Thu, 4 Nov 2021 10:36:31 +0200
Subject: [PATCH] fix(ui5-combobox) always focus the next/previous element on
 TAB/SHIFT+TAB (#4218)

* Fix TAB handling when picker is opened

* Add additional check

* Fix test asserts
---
 packages/main/src/ComboBox.js             |  6 ++++++
 packages/main/test/specs/ComboBox.spec.js | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 436f6176f8e2..d8ab0bbb86fb 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -16,6 +16,8 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isTabNext,
+	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -724,6 +726,10 @@ class ComboBox extends UI5Element {
 			this._isValueStateFocused = false;
 		}
 
+		if ((isTabNext(event) || isTabPrevious(event)) && this.open) {
+			this._closeRespPopover();
+		}
+
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
index 2479f318490b..6cd1d5a8202f 100644
--- a/packages/main/test/specs/ComboBox.spec.js
+++ b/packages/main/test/specs/ComboBox.spec.js
@@ -728,4 +728,24 @@ describe("Keyboard navigation", async () => {
 
 		assert.strictEqual(await prevListItem.getProperty("focused"), false, "The previously focused item is no longer focused");
 	});
+
+	it ("Should focus the next/previous focusable element on TAB/SHIFT+TAB",  async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/ComboBox.html`);
+
+		const combo = await browser.$("#combo-grouping");
+		const arrow = await combo.shadow$("[input-icon]");
+
+		const prevCombo = await browser.$("#value-state-grouping");
+		const nextCombo = await browser.$("#combobox-two-column-layout");
+
+		await arrow.click();
+		await combo.keys("Tab");
+
+		assert.strictEqual(await nextCombo.getProperty("focused"), true, "The next combobox should be focused");
+
+		await arrow.click();
+		await browser.keys(["Shift", "Tab"]);
+
+		assert.strictEqual(await prevCombo.getProperty("focused"), true, "The previous combobox should be focused");
+	});
 });