fix(ui5-combobox): enable setting value programatically (#3253)

BREAKING CHANGE: filter value property is removed.
FIXES: #2233

Author: MapTo0

packages/main/src/ComboBox.hbs

@@ -4,7 +4,7 @@
 	{{/if}}
 
 	<input id="ui5-combobox-input"
-		.value="{{_tempValue}}"
+		.value="{{value}}"
 		inner-input
 		placeholder="{{placeholder}}"
 		?disabled={{disabled}}

packages/main/src/ComboBox.js

@@ -70,14 +70,14 @@ const metadata = {
 		/**
 		 * Defines the "live" value of the component.
 		 * <br><br>
-		 * <b>Note:</b> The property is updated upon typing.
+		 * <b>Note:</b> If we have an item e.g. "Bulgaria", "B" is typed, "ulgaria" is typed ahead, value will be "Bulgaria", filterValue will be "B".
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Initially the filter value is synced with value.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @public
+		 * @private
 		 */
 		filterValue: {
 			type: String,
@@ -216,11 +216,6 @@ const metadata = {
 			noAttribute: true,
 		},
 
-		_tempValue: {
-			type: String,
-			defaultValue: "",
-		},
-
 		_filteredItems: {
 			type: Object,
 		},
@@ -384,27 +379,8 @@ class ComboBox extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		let domValue;
-
 		if (this._initialRendering) {
-			domValue = this.value;
 			this._filteredItems = this.items;
-		} else {
-			domValue = this.filterValue;
-		}
-
-		if (this._autocomplete && domValue !== "") {
-			const item = this._autoCompleteValue(domValue);
-
-			if (!this._selectionChanged && (item && !item.selected)) {
-				this.fireEvent("selection-change", {
-					item,
-				});
-
-				this._selectionChanged = false;
-			}
-		} else {
-			this._tempValue = domValue;
 		}
 
 		if (!this._initialRendering && this.popover && document.activeElement === this && !this._filteredItems.length) {
@@ -413,12 +389,6 @@ class ComboBox extends UI5Element {
 
 		this._selectMatchingItem();
 
-		if (this._isKeyNavigation && this.responsivePopover && this.responsivePopover.opened) {
-			this.focused = false;
-		} else if (this.shadowRoot.activeElement) {
-			this.focused = this.shadowRoot.activeElement.id === "ui5-combobox-input";
-		}
-
 		this._initialRendering = false;
 		this._isKeyNavigation = false;
 	}
@@ -447,28 +417,21 @@ class ComboBox extends UI5Element {
 	_focusin(event) {
 		this.focused = true;
 
-		if (this.filterValue !== this.value) {
-			this.filterValue = this.value;
-		}
+		this._lastValue = this.value;
 
 		!isPhone() && event.target.setSelectionRange(0, this.value.length);
 	}
 
 	_focusout() {
 		this.focused = false;
 
-		this._inputChange();
+		this._fireChangeEvent();
+
 		!isPhone() && this._closeRespPopover();
 	}
 
 	_afterOpenPopover() {
 		this._iconPressed = true;
-
-		if (isPhone() && this.value) {
-			this.filterValue = this.value;
-		}
-
-		this._clearFocus();
 	}
 
 	_afterClosePopover() {
@@ -480,6 +443,11 @@ class ComboBox extends UI5Element {
 		if (isPhone()) {
 			this.blur();
 		}
+
+		if (this._selectionPerformed) {
+			this._lastValue = this.value;
+			this._selectionPerformed = false;
+		}
 	}
 
 	_toggleRespPopover() {
@@ -539,12 +507,28 @@ class ComboBox extends UI5Element {
 			event.stopImmediatePropagation();
 		}
 
-		this._clearFocus();
-		this._tempFilterValue = value;
+		this._filteredItems = this._filterItems(value);
+		this.value = value;
 		this.filterValue = value;
-		this.fireEvent("input");
 
-		this._filteredItems = this._filterItems(value);
+		this._clearFocus();
+
+		// autocomplete
+		if (this._autocomplete && value !== "") {
+			const item = this._autoCompleteValue(value);
+
+			if (!this._selectionChanged && (item && !item.selected)) {
+				this.fireEvent("selection-change", {
+					item,
+				});
+
+				this._selectionChanged = false;
+
+				item.focused = true;
+			}
+		}
+
+		this.fireEvent("input");
 
 		if (isPhone()) {
 			return;
@@ -597,14 +581,23 @@ class ComboBox extends UI5Element {
 		}
 
 		this._filteredItems[indexOfItem].focused = true;
-		this.filterValue = this._filteredItems[indexOfItem].text;
+		this._filteredItems[indexOfItem].selected = true;
+
+		this.value = this._filteredItems[indexOfItem].text;
+
+		// autocomplete
+		const item = this._autoCompleteValue(this.value);
+
+		if ((item && !item.selected)) {
+			this.fireEvent("selection-change", {
+				item,
+			});
+		}
+
 		this._isKeyNavigation = true;
 		this._itemFocused = true;
 		this.fireEvent("input");
-
-		this.fireEvent("selection-change", {
-			item: this._filteredItems[indexOfItem],
-		});
+		this._fireChangeEvent();
 
 		this._selectionChanged = true;
 	}
@@ -618,7 +611,7 @@ class ComboBox extends UI5Element {
 		}
 
 		if (isEnter(event)) {
-			this._inputChange();
+			this._fireChangeEvent();
 			this._closeRespPopover();
 		}
 
@@ -639,7 +632,6 @@ class ComboBox extends UI5Element {
 		if (isPhone() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
 			this.value = this._selectedItemText;
 			this.filterValue = this._selectedItemText;
-			this._tempValue = this._selectedItemText;
 		}
 
 		this.responsivePopover.close();
@@ -654,23 +646,21 @@ class ComboBox extends UI5Element {
 	}
 
 	_autoCompleteValue(current) {
-		const currentValue = current;
-		const matchingItems = this._startsWithMatchingItems(currentValue);
-		const selectionValue = this._tempFilterValue ? this._tempFilterValue : currentValue;
+		const matchingItems = this._startsWithMatchingItems(current);
 
 		if (matchingItems.length) {
-			this._tempValue = matchingItems[0] ? matchingItems[0].text : current;
+			this.value = matchingItems[0] ? matchingItems[0].text : current;
 		} else {
-			this._tempValue = current;
+			this.value = current;
 		}
 
-		if (matchingItems.length && (selectionValue !== this._tempValue && this.value !== this._tempValue)) {
+		if (this._isKeyNavigation) {
 			setTimeout(() => {
-				this.inner.setSelectionRange(selectionValue.length, this._tempValue.length);
+				this.inner.setSelectionRange(0, this.value.length);
 			}, 0);
-		} else if (this._isKeyNavigation) {
+		} else if (matchingItems.length) {
 			setTimeout(() => {
-				this.inner.setSelectionRange(0, this._tempValue.length);
+				this.inner.setSelectionRange(this.filterValue.length, this.value.length);
 			}, 0);
 		}
 
@@ -681,30 +671,41 @@ class ComboBox extends UI5Element {
 
 	_selectMatchingItem() {
 		this._filteredItems = this._filteredItems.map(item => {
-			item.selected = (item.text === this._tempValue);
+			item.selected = (item.text === this.value);
 
 			return item;
 		});
 	}
 
-	_inputChange() {
-		if (this.value !== this._tempValue) {
-			this.value = this._tempValue;
+	_fireChangeEvent() {
+		if (this.value !== this._lastValue) {
 			this.fireEvent("change");
-			this.inner.setSelectionRange(this.value.length, this.value.length);
+			this._lastValue = this.value;
 		}
 	}
 
+	_inputChange(event) {
+		event.preventDefault();
+	}
+
 	_itemMousedown(event) {
 		event.preventDefault();
 	}
 
 	_selectItem(event) {
 		const listItem = event.detail.item;
 
-		this._tempValue = listItem.mappedItem.text;
 		this._selectedItemText = listItem.mappedItem.text;
-		this.filterValue = this._tempValue;
+		this._selectionPerformed = true;
+
+		const sameItemSelected = this.value === this._selectedItemText;
+		const sameSelectionPerformed = this.value.toLowerCase() === this.filterValue.toLowerCase();
+
+		if (sameItemSelected && sameSelectionPerformed) {
+			return this._closeRespPopover();
+		}
+
+		this.value = this._selectedItemText;
 
 		if (!listItem.mappedItem.selected) {
 			this.fireEvent("selection-change", {
@@ -720,8 +721,11 @@ class ComboBox extends UI5Element {
 			return item;
 		});
 
-		this._inputChange();
+		this._fireChangeEvent();
 		this._closeRespPopover();
+
+		// reset selection
+		this.inner.setSelectionRange(this.value.length, this.value.length);
 	}
 
 	_onItemFocus(event) {

packages/main/src/ComboBoxPopover.hbs

@@ -33,7 +33,7 @@
 			>
 				<input
 					class="ui5-input-inner-phone"
-					.value="{{_tempValue}}"
+					.value="{{value}}"
 					inner-input
 					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"

packages/main/test/pages/ComboBox.html

@@ -55,6 +55,10 @@
 			<ui5-cb-item text="Chile"></ui5-cb-item>
 		</ui5-combobox>
 
+		<br>
+
+		<ui5-button id="value-set-btn" >Set value</ui5-button>
+
 		<ui5-combobox id="combo2" style="width: 360px;" aria-label="Select destination:">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
@@ -197,7 +201,7 @@ <h3>ComboBox in Compact</h3>
 
     <script type="module">
 		document.getElementById("lazy").addEventListener("ui5-input", async event => {
-			const { filterValue } = event.target;
+			const { value } = event.target;
 
 			// set busy state
 			event.target.loading = true;
@@ -238,9 +242,13 @@ <h3>ComboBox in Compact</h3>
 		});
 
 		document.getElementById("input-cb").addEventListener("ui5-input", function(event) {
-			document.getElementById("input-placeholder").innerHTML = event.target.filterValue;
+			document.getElementById("input-placeholder").innerHTML = event.target.value;
 			document.getElementById("input-count").innerHTML = parseInt(document.getElementById("input-count").innerHTML) + 1;
 		});
+
+		document.getElementById("value-set-btn").addEventListener("click", function (event) {
+			document.getElementById("combo").value = "new value";
+		});
 	</script>
 
 </body>

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

@@ -65,7 +65,6 @@ describe("General interaction", () => {
 		});
 
 		assert.strictEqual(selection, "ahrain", "ahrain should be selected");
-		assert.strictEqual(combo.getProperty("value"), "Bulgaria", "Value should be Bulgaria");
 		const listItems = popover.$("ui5-list").$$("ui5-li");
 		assert.ok(listItems[0].getProperty("selected"), "List Item should be selected");
 
@@ -190,6 +189,62 @@ describe("General interaction", () => {
 
 		assert.strictEqual(placeholder.getText(), "Argentina", "Text should be empty");
 		assert.strictEqual(counter.getText(), "1", "Call count should be 1");
+
+		arrow.click();
+
+		assert.strictEqual(counter.getText(), "1", "Call count should be 1");
+
+		arrow.click();
+
+		popover.$("ui5-list").$$("ui5-li")[1].click();
+		assert.strictEqual(counter.getText(), "2", "Call count should be 2");
+	});
+
+	it ("Tests change event after pressing enter key", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/ComboBox.html`);
+
+		const counter = $("#change-count");
+		const combo = $("#change-cb");
+		const input = combo.shadow$("[inner-input]");
+
+		input.click();
+
+		input.keys("Enter");
+		input.keys("Enter");
+		input.keys("Enter");
+		input.keys("Enter");
+
+		assert.strictEqual(counter.getText(), "0", "Call count should be 0");
+
+		input.keys("a");
+
+		input.keys("Enter");
+		input.keys("Enter");
+		input.keys("Enter");
+		input.keys("Enter");
+
+		assert.strictEqual(counter.getText(), "1", "Call count should be 1");
+
+	});
+
+	it ("Tests change event after type and item select", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/ComboBox.html`);
+
+		const counter = $("#change-count");
+		const combo = $("#change-cb");
+		const input = combo.shadow$("[inner-input]");
+		const placeholder = $("#change-placeholder");
+
+		input.click();
+		input.keys("a");
+
+		// click on first item
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#change-cb");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		popover.$("ui5-list").$$("ui5-li")[0].click();
+
+		assert.strictEqual(placeholder.getText(), "Argentina", "Text should be empty");
+		assert.strictEqual(counter.getText(), "1", "Call count should be 1");
 	});
 
 	it ("Tests input event", () => {
@@ -351,4 +406,19 @@ describe("Accessibility", () => {
 
 		assert.strictEqual(invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Span value is correct.")
 	});
+
+	it ("Tests setting value programatically", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/ComboBox.html`);
+
+		const combo = $("#combo");
+		const btn = $("#value-set-btn");
+		const inner = combo.shadow$("input");
+
+		assert.strictEqual(combo.getProperty("value"), "Bulgaria", "Initial Value should be Bulgaria");
+
+		btn.click();
+
+		assert.strictEqual(combo.getProperty("value"), "new value", "ComboBox value should be set to 'new value'");
+		assert.strictEqual(inner.getProperty("value"), "new value", "ComboBox value should be set to 'new value'");
+	});
 });