fix(ui5-combobox): Properly focus inner input (#3243)

FIXES: #2895

Author: d3xter666

packages/main/src/ComboBox.hbs

@@ -23,6 +23,7 @@
 		aria-describedby="{{valueStateTextId}}"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}

packages/main/test/pages/ComboBox.html

@@ -54,6 +54,7 @@
 			<ui5-cb-item text="Canada"></ui5-cb-item>
 			<ui5-cb-item text="Chile"></ui5-cb-item>
 		</ui5-combobox>
+		<ui5-button id="combo-focus">Focus ComboBox</ui5-button>
 
 		<br>
 
@@ -276,6 +277,10 @@ <h3>ComboBox in Compact</h3>
 		document.getElementById("value-set-btn").addEventListener("click", function (event) {
 			document.getElementById("combo").value = "new value";
 		});
+
+		document.getElementById("combo-focus").addEventListener("click", function () {
+			document.getElementById("combo").focus();
+		});
 	</script>
 
 </body>

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

@@ -491,4 +491,15 @@ describe("Accessibility", () => {
 		assert.strictEqual(combo.getProperty("value"), "new value", "ComboBox value should be set to 'new value'");
 		assert.strictEqual(inner.getProperty("value"), "new value", "ComboBox value should be set to 'new value'");
 	});
+
+	it ("Should focus the ComboBox with the API", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/ComboBox.html`);
+
+		const combo = $("#combo");
+		const focusBtn = $("#combo-focus");
+
+		focusBtn.click();
+
+		assert.ok(combo.getProperty("focused"), "ComboBox to be focused");
+	});
 });