refactor(ui5-input): Add hook for value update on preview (#1956)

Added extension point to allow extending components control the behaviour on suggestion preview. The default behaviour of the Input with suggestions is to replace the current value with the value of the previewed suggestion, when the user navigates with UP/DOWN arrows. But, there are use cases as in the attached issue, that instead of replacing the entire text, just part of it has to be replaced, changed or added to.

FIXES: #1878

Author: ilhan007

packages/main/src/Input.js

@@ -694,7 +694,7 @@ class Input extends UI5Element {
 	}
 
 	_afterClosePopover() {
-		this._announceSelectedItem();
+		this.announceSelectedItem();
 
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
@@ -780,18 +780,22 @@ class Input extends UI5Element {
 	}
 
 	previewSuggestion(item) {
-		this.valueBeforeItemSelection = this.value;
+		const emptyValue = item.type === "Inactive" || item.group;
 
-		if (item.type === "Inactive" || item.group) {
-			this.value = "";
-		} else {
-			this.value = item.textContent;
-		}
-
-		this._announceSelectedItem();
+		this.valueBeforeItemSelection = this.value;
+		this.updateValueOnPreview(emptyValue ? "" : item.textContent);
+		this.announceSelectedItem();
 		this._previewItem = item;
 	}
 
+	/**
+	 * Updates the input value on item preview.
+	 * @param {itemValue} itemValue The value of the item that is on preview
+	 */
+	updateValueOnPreview(itemValue) {
+		this.value = itemValue;
+	}
+
 	/**
 	 * The suggestion item on preview.
 	 * @type { ui5-suggestion-item }
@@ -936,7 +940,7 @@ class Input extends UI5Element {
 		};
 	}
 
-	_announceSelectedItem() {
+	announceSelectedItem() {
 		const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
 
 		if (this.Suggestions && this.Suggestions._isItemOnTarget()) {