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

@@ -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");
+	});
+});

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