fix(ui5-input): sync width of suggestions popover and input (#1979)

Author: fifoosid

packages/main/src/Input.js

@@ -1052,6 +1052,9 @@ class Input extends UI5Element {
 				"width": `${this._listWidth}px`,
 				"padding": "0.5625rem 1rem",
 			},
+			suggestionsPopover: {
+				"max-width": `${this._inputWidth}px`,
+			},
 		};
 	}
 

packages/main/src/InputPopover.hbs

@@ -4,6 +4,7 @@
 		_disable-initial-focus
 		placement-type="Bottom"
 		horizontal-align="Left"
+		style="{{styles.suggestionsPopover}}"
 		@ui5-after-open="{{_afterOpenPopover}}"
 		@ui5-after-close="{{_afterClosePopover}}"
 		@scroll="{{_scroll}}"

packages/main/test/pages/Input.html

@@ -321,6 +321,11 @@ <h3>Input suggestions with highlighing and XSS test</h3>
 		</ui5-suggestion-item>
 	</ui5-input>
 
+	<h3>Test width of suggestions popover</h3>
+	<ui5-input id="suggestionsPopoverWidth" show-suggestions style="width: 350px !important;">
+		<ui5-li>Argentinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ui5-li>
+	</ui5-input>
+
 	<script>
 		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" }];
 

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

@@ -254,6 +254,17 @@ describe("Input general interaction", () => {
 		assert.strictEqual(inputResult.getValue(), "", "suggestionItemSelected event is not called");
 	});
 
+	it("checks if the suggestions popover width is the same as the input width when there is a long suggestion", () => {
+		const input = $("#suggestionsPopoverWidth");
+		const nativeInput = $("#suggestionsPopoverWidth").shadow$("input");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#suggestionsPopoverWidth");
+		const listItem = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
+
+		nativeInput.click();
+
+		assert.strictEqual(input.getSize('width'), listItem.getSize('width'));
+	})
+
 	it("Input's maxlength property is set correctly", () => {
 		const input5 = $("#input-tel");
 		const inputShadowRef = $("#input-tel").shadow$("input");