Skip to content

feat(select): flexibility in dropdown menu width#1744

Open
arina-dhis2 wants to merge 1 commit into
masterfrom
LIBS-837/select-dropdown-width-flexibility
Open

feat(select): flexibility in dropdown menu width#1744
arina-dhis2 wants to merge 1 commit into
masterfrom
LIBS-837/select-dropdown-width-flexibility

Conversation

@arina-dhis2
Copy link
Copy Markdown

@arina-dhis2 arina-dhis2 commented May 22, 2026

Implements LIBS-837


Description

SingleSelect and MultiSelect measure the input width and pass it to the dropdown as a fixed pixel width. That works for a wide input, but breaks when the input becomes too narrow: long labels get compressed in the menu, and the result looks unnecessarily tight.

This PR adds two optional props — menuMinWidth and menuMaxWidth — on SingleSelect, MultiSelect, SingleSelectField, and MultiSelectField. They are forwarded through the shared Select / MenuWrapper stack.

image

Known issues

With only menuMinWidth (no menuMaxWidth), the menu can grow without an upper bound for very long option labels; menuMinWidth and menuMaxWidth should be used together when labels can vary significantly in length.


Checklist

  • API docs are generated
  • Tests were added
  • Storybook demos were added

Screenshots

menuMaxWidth is slightly greater than the width of the input, but less than the width of the options:
Screenshot 2026-05-22 at 11 37 33

with menuMinWidth:
Screenshot 2026-05-22 at 11 40 20

@arina-dhis2 arina-dhis2 requested a review from a team as a code owner May 22, 2026 09:56
@sonarqubecloud
Copy link
Copy Markdown

@dhis2-bot
Copy link
Copy Markdown
Contributor

🚀 Deployed on https://pr-1744--dhis2-ui.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants