fix(ui5-combobox): allow setting value programmatically

The Input's text value is now updated immediately once changing it
programmatically (via JavaScript, not by user interaction).

Fixes: SAP#2233

Author: ndeshev

packages/main/src/ComboBox.js

@@ -391,7 +391,7 @@ class ComboBox extends UI5Element {
 	onBeforeRendering() {
 		let domValue;
 
-		if (this._initialRendering) {
+		if (this._initialRendering || !this._isValueChangedByInteraction()) {
 			domValue = this.value;
 			this._filteredItems = this.items;
 		} else {
@@ -443,6 +443,12 @@ class ComboBox extends UI5Element {
 
 		this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
 		this.storeResponsivePopoverWidth();
+
+		// Reset the interaction flag only after any scheduled re-renderings called in this method are done,
+		// avoid resetting the indicator before the calculations caused by the the user action are finished
+		setTimeout(() => {
+			this._setValueChangedByInteraction(false);
+		});
 	}
 
 	shouldClosePopover() {
@@ -608,6 +614,7 @@ class ComboBox extends UI5Element {
 	_keydown(event) {
 		const isArrowKey = isDown(event) || isUp(event);
 		this._autocomplete = !(isBackSpace(event) || isDelete(event));
+		this._setValueChangedByInteraction(true);
 
 		if (isArrowKey) {
 			this.handleArrowKeyPress(event);
@@ -709,6 +716,7 @@ class ComboBox extends UI5Element {
 			return item;
 		});
 
+		this._setValueChangedByInteraction(true);
 		this._inputChange();
 		this._closeRespPopover();
 	}
@@ -717,6 +725,14 @@ class ComboBox extends UI5Element {
 		this._itemFocused = true;
 	}
 
+	_isValueChangedByInteraction() {
+		return this._isChangedByInteraction;
+	}
+
+	_setValueChangedByInteraction(isValueChangedByInteraction) {
+		this._isChangedByInteraction = isValueChangedByInteraction;
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

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

@@ -325,5 +325,14 @@ describe("General interaction", () => {
 
 		arrow.click();
 		assert.strictEqual(listItem.shadow$(".ui5-li-info").getText(), "DZ", "Additional item text should be displayed");
+	});	
+
+	it ("Tests setValue() update programatically (via JS, not by user interaction)", () => {
+		const combo = $("#combo2");
+		const input = combo.shadow$("#ui5-combobox-input");
+
+		combo.setProperty("value", "Value is set instantly");
+
+		assert.strictEqual(input.getAttribute("value"), "Value is set instantly", "Value is updated in realtime when set with direct property update");
 	});
 });