From 123c15511f3f20f12e950ea7b15aec01f38ad60a Mon Sep 17 00:00:00 2001
From: "Martin R. Hristov" <m.hristov@sap.com>
Date: Tue, 21 Nov 2023 14:55:29 +0200
Subject: [PATCH] fix(ui5-combobox): update picker items while open

FIXES: #7011
---
 packages/main/src/ComboBox.ts             |  5 +++++
 packages/main/test/pages/ComboBox.html    | 21 +++++++++++++++++++++
 packages/main/test/specs/ComboBox.spec.js | 20 ++++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 0766e275fcb6..331656656bb8 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -458,6 +458,10 @@ class ComboBox extends UI5Element {
 			this._filteredItems = this.items;
 		}
 
+		if (this.open && !this._isKeyNavigation) {
+			this._filteredItems = this._filterItems(this.filterValue);
+		}
+
 		if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length) {
 			popover?.close();
 		}
@@ -535,6 +539,7 @@ class ComboBox extends UI5Element {
 	_afterClosePopover() {
 		this._iconPressed = false;
 		this._filteredItems = this.items;
+		this.filterValue = "";
 
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 1ff451382f70..a6034d6c48cb 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -300,6 +300,27 @@ <h3>ComboBox in Compact</h3>
 		</ui5-combobox>
 	</div>
 
+	<div class="demo-section">
+		<ui5-combobox id="dynamic-items">
+			<ui5-cb-item text="Hello World"></ui5-cb-item>
+		</ui5-combobox>
+	
+		<ui5-button id="add-items-btn">Start adding items</ui5-button>
+	
+		<script>
+			const addItemsBtn = document.getElementById("add-items-btn");
+			const dynamicItemsCb = document.getElementById("dynamic-items");
+	
+			addItemsBtn.addEventListener("click", () => {
+				setInterval(() => {
+					const item = document.createElement("ui5-cb-item");
+					item.text = "test";
+					dynamicItemsCb.appendChild(item);
+				}, 1000);
+			});
+		</script>
+	</div>
+
 	<script type="module">
 		document.getElementById("lazy").addEventListener("ui5-input", async event => {
 			const { value } = event.target;
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
index 286eac952d18..3cc22592c536 100644
--- a/packages/main/test/specs/ComboBox.spec.js
+++ b/packages/main/test/specs/ComboBox.spec.js
@@ -551,6 +551,26 @@ describe("General interaction", () => {
 		await cb.click();
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover with valueStateMessage should not be opened.");
 	});
+
+	it ("Should add items dynamically items to the picker", async () => {
+		await browser.url(`test/pages/ComboBox.html`);
+
+		const cb = await $("#dynamic-items");
+		const btn = await $("#add-items-btn");
+		const arrow = await cb.shadow$("[input-icon]");
+
+		await btn.click();
+		await arrow.click();
+
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#dynamic-items");
+		const initialListItems = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li");
+
+		await browser.pause(2000);
+
+		const updatedListItems = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li");
+
+		assert.notEqual(initialListItems.length, updatedListItems.length, "item count should be updated");
+	});
 });
 
 describe("Grouping", () => {