fix(ui5-combobox): prevent whitespace below value state when no items are present (#12218)

fix(ui5-combobox): prevent whitespace below value state when no items present

Author: aleksandar-terziev

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", () => {

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">