From be2079158ef1ab16e335b438b2f8d17a301ce179 Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Thu, 23 Jan 2025 16:42:41 +0200
Subject: [PATCH] fix(ui5-select): custom value state message is now visible

When open a select wiht custom value state message and press "ESC" key
the custom value state message remains visible.

Fixes: #10323
---
 packages/main/cypress/specs/Select.cy.ts    | 19 +++++++++++++++++++
 packages/main/src/SelectPopoverTemplate.tsx |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/main/cypress/specs/Select.cy.ts b/packages/main/cypress/specs/Select.cy.ts
index e1d6214ff55b..27879ef5cc56 100644
--- a/packages/main/cypress/specs/Select.cy.ts
+++ b/packages/main/cypress/specs/Select.cy.ts
@@ -37,3 +37,22 @@ describe("Select - Accessibility", () => {
 			.should("have.attr", "title", EXPECTED_TOOLTIP);
 	});
 });
+
+describe("Select - Popover", () => {
+	it("Popover should render custom value state", () => {
+		cy.mount(html`
+			<ui5-select id="warningSelect" value-state="Critical">
+				<ui5-option>This option has text bigger than ui5-select's width</ui5-option>
+				<div slot="valueStateMessage">Custom message</div>
+
+			</ui5-select>
+		`);
+
+		cy.get("#warningSelect").realClick().realPress("Escape");
+
+		cy.get("#warningSelect")
+			.find("[slot=\"valueStateMessage\"]")
+			.should("be.visible")
+			.should("have.text", "Custom message");
+	});
+});
diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx
index 8fe92bd40991..666bd53cd2e3 100644
--- a/packages/main/src/SelectPopoverTemplate.tsx
+++ b/packages/main/src/SelectPopoverTemplate.tsx
@@ -43,7 +43,7 @@ export default function SelectPopoverTemplate(this: Select) {
 									"ui5-select-value-state-dialog-header": true,
 									...this.classes.popoverValueState
 								}}>
-									{valueStateMessage.call(this)}
+									{this._isPickerOpen && valueStateMessage.call(this)}
 								</div>
 							}
 						</div>
@@ -56,7 +56,7 @@ export default function SelectPopoverTemplate(this: Select) {
 							<Icon
 								class="ui5-input-value-state-message-icon"
 								name={this._valueStateMessageInputIcon} />
-							{valueStateMessage.call(this)}
+							{this._isPickerOpen && valueStateMessage.call(this)}
 						</div>
 					}