From 15c2409ca924af22ecbe4642ffaa44e16fdf4b71 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 23 Jul 2020 15:44:00 +0300
Subject: [PATCH 1/2] fix(ui5-input): sunc width of suggestions popover and
 input

---
 packages/main/src/features/InputSuggestions.js |  1 +
 packages/main/test/pages/Input.html            |  5 +++++
 packages/main/test/specs/Input.spec.js         | 11 +++++++++++
 3 files changed, 17 insertions(+)

diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index dec676bf2fb9..6395221939a3 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -119,6 +119,7 @@ class Suggestions {
 		this.responsivePopover = await this._respPopover();
 		this._beforeOpen();
 		this.responsivePopover.open(this._getComponent());
+		this.responsivePopover.style.maxWidth = this._getComponent().style.width;
 	}
 
 	async close(preventFocusRestore = false) {
diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
index f4c25a244900..382936b8a9d5 100644
--- a/packages/main/test/pages/Input.html
+++ b/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" }];
 
diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
index ff4abf14e01b..b2c14e2aee3d 100644
--- a/packages/main/test/specs/Input.spec.js
+++ b/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");

From 904587a762a716de25109711746ea4989ee992ce Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Fri, 24 Jul 2020 11:47:17 +0300
Subject: [PATCH 2/2] implement it in input.js

---
 packages/main/src/Input.js                     | 3 +++
 packages/main/src/InputPopover.hbs             | 1 +
 packages/main/src/features/InputSuggestions.js | 1 -
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 43869210662e..6e82a53382ef 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -1041,6 +1041,9 @@ class Input extends UI5Element {
 				"width": `${this._listWidth}px`,
 				"padding": "0.5625rem 1rem",
 			},
+			suggestionsPopover: {
+				"max-width": `${this._inputWidth}px`,
+			},
 		};
 	}
 
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index 4f69cb11e840..fc4224550c72 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/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}}"
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
index 6395221939a3..dec676bf2fb9 100644
--- a/packages/main/src/features/InputSuggestions.js
+++ b/packages/main/src/features/InputSuggestions.js
@@ -119,7 +119,6 @@ class Suggestions {
 		this.responsivePopover = await this._respPopover();
 		this._beforeOpen();
 		this.responsivePopover.open(this._getComponent());
-		this.responsivePopover.style.maxWidth = this._getComponent().style.width;
 	}
 
 	async close(preventFocusRestore = false) {