fix(ui5-combobox): update picker items while open

FIXES: #7011
SAP · Nov 21, 2023 · 123c155 · 123c155
1 parent 87535f1
commit 123c155
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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", () => {