From 673d9a2387ae00f1480594fd4ed72c51e04cc68a Mon Sep 17 00:00:00 2001
From: aleksandar-terziev <aleksandar.terziev@sap.com>
Date: Fri, 29 Aug 2025 13:18:10 +0300
Subject: [PATCH] fix(ui5-combobox): prevent whitespace below value state when
 no items present

---
 packages/main/cypress/specs/ComboBox.cy.tsx   | 23 +++++++++++++++++++
 packages/main/src/ComboBoxPopoverTemplate.tsx |  2 ++
 2 files changed, 25 insertions(+)

diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index ae745dca6c5a..34e5e9a6f12a 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -395,6 +395,29 @@ describe("General Interaction", () => {
 			.find(".ui5-li-title")
 			.should("have.text", "I #1");
 	});
+
+	it("should not render ComboBox items list when no items are present", () => {
+		cy.mount(
+            <ComboBox valueState="Negative" open>
+                {/* No ComboBox items */}
+            </ComboBox>
+        );
+
+		cy.get("[ui5-combobox]")
+            .as("combo")
+            .shadow()
+            .find("ui5-responsive-popover")
+            .as("popover")
+            .should("have.attr", "open");
+
+		cy.get("@popover")
+            .find(".ui5-responsive-popover-header.ui5-valuestatemessage-root")
+            .should("exist");
+
+		cy.get("@popover")
+            .find("ui5-list")
+            .should("not.exist");
+	});
 });
 
 describe("Keyboard navigation", () => {
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index d9ca74f70bd4..a359c83ff2ec 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -86,6 +86,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				</div>
 				}
 
+				{!!this._filteredItems.length &&
 				<List
 					class="ui5-combobox-items-list"
 					separators="None"
@@ -97,6 +98,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				>
 					{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
+				}
 
 				{this._isPhone &&
 			<div slot="footer" class="ui5-responsive-popover-footer">