Skip to content

Commit af4eb20

Browse files
fix(Select): add default max-width of 100rem to responsive popover dropdown
Fixes issue #13359 where ui5-select popover would expand to full page width when an option has very long text content. This aligns the behavior with the SAP Fiori ComboBox (sap.m.ComboBoxTextField) which applies a default max-width of 100rem to its picker dropdown. The fix applies max-width: 100rem as an inline style on the responsive popover via the component's styles() getter, matching the ComboBox's getMaxWidth() API default value. Added two Cypress unit tests verifying: - The max-width: 100rem style is applied when an option has very long text - The max-width: 100rem style is always present as a default on the popover
1 parent b51cef2 commit af4eb20

2 files changed

Lines changed: 46 additions & 0 deletions

File tree

packages/main/cypress/specs/Select.cy.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1969,3 +1969,48 @@ describe("Select - active/down state", () => {
19691969
.realMouseUp();
19701970
});
19711971
});
1972+
1973+
describe("Select - popover max-width", () => {
1974+
it("applies default max-width of 100rem to the responsive popover when an option has very long text", () => {
1975+
const longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ".repeat(5);
1976+
1977+
cy.mount(
1978+
<Select>
1979+
<Option value="desktop" icon="laptop">{longText}</Option>
1980+
<Option value="short">Short option</Option>
1981+
</Select>
1982+
);
1983+
1984+
// Open the picker
1985+
cy.get("[ui5-select]").realClick();
1986+
cy.get("[ui5-select]").should("have.attr", "opened");
1987+
1988+
// The responsive popover should have max-width capped at 100rem
1989+
cy.get("[ui5-select]")
1990+
.shadow()
1991+
.find("[ui5-responsive-popover]")
1992+
.should($el => {
1993+
const maxWidth = $el[0].style.maxWidth;
1994+
expect(maxWidth).to.equal("100rem");
1995+
});
1996+
});
1997+
1998+
it("ensures the popover width does not exceed 100rem style property by default", () => {
1999+
cy.mount(
2000+
<Select>
2001+
<Option value="short">Short</Option>
2002+
</Select>
2003+
);
2004+
2005+
cy.get("[ui5-select]").realClick();
2006+
cy.get("[ui5-select]").should("have.attr", "opened");
2007+
2008+
cy.get("[ui5-select]")
2009+
.shadow()
2010+
.find("[ui5-responsive-popover]")
2011+
.should($el => {
2012+
const maxWidth = $el[0].style.maxWidth;
2013+
expect(maxWidth).to.equal("100rem");
2014+
});
2015+
});
2016+
});

packages/main/src/Select.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1105,6 +1105,7 @@ class Select extends UI5Element implements IFormInputElement {
11051105
},
11061106
responsivePopover: {
11071107
"min-width": `${this.offsetWidth}px`,
1108+
"max-width": "100rem",
11081109
},
11091110
};
11101111
}

0 commit comments

Comments
 (0)