fix(ui5-combobox): corrected display of items in popover

Now, all items are shown inside ui5-popover when it is opened and items are filtered only on user input.

Fixes: #1925

Author: nnaydenow

packages/main/src/ComboBox.js

@@ -327,9 +327,14 @@ class ComboBox extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		const domValue = this._initialRendering ? this.value : this.filterValue;
+		let domValue;
 
-		this._filteredItems = this._filterItems(domValue);
+		if (this._initialRendering) {
+			domValue = this.value;
+			this._filteredItems = this.items;
+		} else {
+			domValue = this.filterValue;
+		}
 
 		if (this._autocomplete && domValue !== "") {
 			this._autoCompleteValue(domValue);
@@ -502,12 +507,6 @@ class ComboBox extends UI5Element {
 		this._closeRespPopover();
 	}
 
-	get _filteredItems() {
-		return !this.items.length ? [] : this.items.filter(item => {
-			return item.text.toLowerCase().startsWith(this.value.toLowerCase());
-		});
-	}
-
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

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

@@ -17,6 +17,32 @@ describe("General interaction", () => {
 		assert.ok(popover.getProperty("opened"), "Popover should be displayed")
 	});
 
+	it ("Items filtration", () => {
+		browser.url("http://localhost:8080/test-resources/pages/ComboBox.html");
+
+		const combo = $("#combo");
+		const arrow = combo.shadow$("[input-icon]");
+		const input = combo.shadow$("#ui5-combobox-input");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#combo");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		let listItems = popover.$("ui5-list").$$("ui5-li");
+
+		// act
+		arrow.click();
+
+		// assert
+		assert.strictEqual(listItems.length, 11, "All items are shown with selected item");
+
+		// act
+		input.click();
+		browser.keys("Backspace");
+
+		// assert
+		listItems = popover.$("ui5-list").$$("ui5-li");
+		assert.strictEqual(listItems.length, 1, "Items are filtered on input value change");
+
+	});
+
 	it ("Should open the popover when typing a value", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ComboBox.html");