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

@@ -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();
 

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");
+	});
 });