diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 4ad8461ea70f..0c21d1cdbe66 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -461,6 +461,44 @@ describe("Select - Popover", () => { .should("be.visible") .should("have.text", "Custom message"); }); + + it("Value state message popover can extend beyond select width", () => { + cy.mount( + + ); + + // Trigger the value state popover by clicking and then pressing Escape + cy.get("[ui5-select]") + .realClick() + .realPress("Escape"); + + // Get the select width for comparison + cy.get("[ui5-select]") + .invoke("outerWidth") + .as("selectWidth"); + + // Find the standalone value state popover + cy.get("[ui5-select]") + .shadow() + .find(".ui5-valuestatemessage-popover") + .should("exist") + .as("valueStatePopover"); + + // Verify the popover width is greater than the select width + cy.get("@valueStatePopover") + .invoke("outerWidth") + .then((popoverWidth) => { + cy.get("@selectWidth").then((selectWidth) => { + expect(popoverWidth).to.be.greaterThan(Number(selectWidth)); + }); + }); + }); }); describe("Select - Properties", () => { diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 66693a37ffe5..0dd8c5f73eaf 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -995,6 +995,7 @@ class Select extends UI5Element implements IFormInputElement { return { popoverValueState: { "ui5-valuestatemessage-root": true, + "ui5-valuestatemessage-header": !this._isPhone, "ui5-valuestatemessage--success": this.valueState === ValueState.Positive, "ui5-valuestatemessage--error": this.valueState === ValueState.Negative, "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical, @@ -1009,11 +1010,12 @@ class Select extends UI5Element implements IFormInputElement { get styles() { return { popoverHeader: { - "max-width": `${this.offsetWidth}px`, + "display": "block", }, responsivePopoverHeader: { "display": this.options.length && this._listWidth === 0 ? "none" : "inline-block", "width": `${this.options.length ? this._listWidth : this.offsetWidth}px`, + "max-width": "100%", }, responsivePopover: { "min-width": `${this.offsetWidth}px`,