Fix for #13359: [Select]: Add default max-width #13545
Open
EdrilanBerisha wants to merge 5 commits into
Open
Conversation
…opdown Fixes issue UI5#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
…attern Use the same max-width pattern as ComboBox and Input: - If the component width in rem exceeds 40, cap max-width at the component's own pixel width (preventing the picker from growing wider than the control) - Otherwise fall back to the 40rem default cap This replaces the previous flat 100rem value and matches the established pattern used in ComboBox.ts and Input.ts. Updated Cypress tests to reflect the dynamic max-width logic: - Narrow select (200px) -> expects max-width: 40rem - Wide select (1000px) -> expects max-width in px matching the component width
|
|
EdrilanBerisha
changed the title
EdrilanBerisha
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixing #13359
To fix the missing max-width I used the same pattern already used in similar components like:
-
ComboBox.ts(line 1728)-
Input.ts(line 1951)-
MultiComboBox.ts(line 2383)All three follow the identical logic: "if the component is wider than 40rem, clamp the popover to the component's own width in px; otherwise default to 40rem."
If you wish to use a different max-width let me know I can adjust and also modify the tests