fix(ui5-combo-box): Close picker when no match (#1926)

When the user types and there is no match, the picker remains open and empty, now it closes. FIXES: #1920
SAP · Jul 8, 2020 · dcac133 · dcac133
1 parent cd2f9bf
commit dcac133
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -411,7 +411,13 @@ class ComboBox extends UI5Element {
 		this.filterValue = value;
 		this.fireEvent("input");
 
-		this._openRespPopover();
+		this._filteredItems = this._filterItems(value);
+
+		if (!this._filteredItems.length) {
+			this._closeRespPopover();
+		} else {
+			this._openRespPopover();
+		}
 	}
 
 	_startsWithMatchingItems(str) {

diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
@@ -57,17 +57,33 @@ describe("General interaction", () => {
 		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
 		let listItems = popover.$("ui5-list").$$("ui5-li");
 
+		// act
 		arrow.click();
 
+		// assert
 		assert.strictEqual(listItems.length, 11, "Items should be 11");
 
+		// act
 		input.keys("a");
+
+		// assert
 		listItems = popover.$("ui5-list").$$("ui5-li");
 		assert.strictEqual(listItems.length, 5, "Items should be 5");
 
+		// act
 		input.keys("u");
+
+		// assert
 		listItems = popover.$("ui5-list").$$("ui5-li");
 		assert.strictEqual(listItems.length, 2, "Items should be 2");
+
+		// act
+		input.keys("zzz");
+		listItems = popover.$("ui5-list").$$("ui5-li");
+
+		// assert
+		assert.strictEqual(listItems.length, 0, "Items should be 0");
+		assert.notOk(popover.getProperty("opened"), "Popover should close");
 	});
 
 	it ("Tests change event", () => {