fix(ui5-input): focus is handled properly (#2670)

Author: niyap

packages/main/src/Input.js

@@ -654,11 +654,7 @@ class Input extends UI5Element {
 	}
 
 	async _onfocusin(event) {
-		const inputDomRef = await this.getInputDOMRef();
-
-		if (event.target !== inputDomRef) {
-			return;
-		}
+		await this.getInputDOMRef();
 
 		this.focused = true; // invalidating property
 		this.previousValue = this.value;

packages/main/src/MultiInput.js

@@ -237,6 +237,17 @@ class MultiInput extends Input {
 		}
 	}
 
+	/**
+	 * @override
+	 */
+	async _onfocusin(event) {
+		const inputDomRef = await this.getInputDOMRef();
+
+		if (event.target === inputDomRef) {
+			await super._onfocusin(event);
+		}
+	}
+
 	shouldOpenSuggestions() {
 		const parent = super.shouldOpenSuggestions();
 		const valueHelpPressed = this._valueHelpIconPressed;

packages/main/test/pages/Input.html

@@ -295,7 +295,22 @@ <h3>Test width of suggestions popover</h3>
 		<ui5-li>Argentinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ui5-li>
 	</ui5-input>
 
+	<h3>Input in a Dialog</h3>
+	<ui5-button id="btnOpenDialog">Open Dialog</ui5-button>
+	<ui5-dialog id="dialog">
+		<ui5-input id="inputInDialog" show-suggestions style="width: 100%">
+			<ui5-li>Cozy</ui5-li>
+			<ui5-li>Compact</ui5-li>
+			<ui5-li>Condensed</ui5-li>
+			<ui5-li type="Inactive">Inactive Compact</ui5-li>
+			<ui5-li type="Inactive">Inactive Condensed</ui5-li>
+		</ui5-input>
+	</ui5-dialog>
+
 	<script>
+		btnOpenDialog.addEventListener("click", function () {
+			dialog.open();
+		});
 		var sap_database_entries = [{ key: "A", text: "A" }, { key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "B", text: "B" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "C", text: "C" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "L", text: "L" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "P", text: "P" }, { key: "Prt", text: "Portugal" }, { key: "S", text: "S" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Sey", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];
 
 		var input = document.getElementById('myInput');

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

@@ -371,4 +371,19 @@ describe("Input general interaction", () => {
 		assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
 		assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
 	});
+
+	it("Should open suggestions popover when ui5-input is the first focusable element within a dialog", () => {
+		browser.url("http://localhost:8080/test-resources/pages/Input.html");
+		const input = $("#inputInDialog");
+		const button = browser.$("#btnOpenDialog");
+
+		//act
+		button.click();
+
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputInDialog");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+		//assert
+		assert.ok(popover.isDisplayedInViewport(), "The popover is visible");
+	});
 });