feat(ui5-input): add suggestion-item-preview event (#1778)

Add "suggestion-item-preview" event to notify when the user navigates to a suggestion item via the ARROW keys,
before he/she performs final selection.

Related to: #1768

Author: ilhan007

packages/main/src/Input.js

@@ -349,6 +349,20 @@ const metadata = {
 				item: { type: HTMLElement },
 			},
 		},
+
+		/**
+		 * Fired when the user navigates to a suggestion item via the ARROW keys,
+		 * as a preview, before the final selection.
+		 *
+		 * @event sap.ui.webcomponents.main.Input#suggestion-item-preview
+		 * @param {HTMLElement} item The previewed item
+		 * @public
+		 */
+		"suggestion-item-preview": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
 	},
 };
 
@@ -785,6 +799,7 @@ class Input extends UI5Element {
 
 	onItemPreviewed(item) {
 		this.previewSuggestion(item);
+		this.fireEvent("suggestion-item-preview", { item });
 	}
 
 	onOpen() {}

packages/main/test/pages/Input.html

@@ -40,7 +40,8 @@ <h3>Input in Compact</h3>
 	</div>
 
 	<h3> Input suggestions with ui5-suggestion-item</h3>
-	<ui5-input show-suggestions style="width: 100%">
+	<ui5-input id="inputItemPreviewRes" placeholder="preview item test"></ui5-input>	
+	<ui5-input id="inputItemPreview" show-suggestions style="width: 100%">
 		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
@@ -309,6 +310,10 @@ <h3> Input with multiple icons</h3>
 		inputChange.addEventListener("ui5-change", function (event) {
 			inputChangeResult.value = ++inputChangeResultCounter;
 		});
+
+		inputItemPreview.addEventListener("ui5-suggestion-item-preview", function (event) {
+			inputItemPreviewRes.value = event.detail.item.textContent;
+		});
 	</script>
 </body>
 </html>

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

@@ -129,6 +129,16 @@ describe("Input general interaction", () => {
 		assert.strictEqual(inputChangeResult.getValue(), "2", "change is called twice");
 	});
 
+	it("fires suggestion-item-preview", () => {
+		const inputItemPreview = $("#inputItemPreview").shadow$("input");
+		const inputItemPreviewRes = $("#inputItemPreviewRes");
+
+		inputItemPreview.click();
+		inputItemPreview.keys("ArrowDown");
+
+		assert.strictEqual(inputItemPreviewRes.getValue(), "Cozy", "First item has been previewed");
+	});
+
 	it("handles suggestions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/Input.html");