feat(select): flexibility in dropdown menu width#1744
Conversation
|
|
🚀 Deployed on https://pr-1744--dhis2-ui.netlify.app |
tomzemp
left a comment
tomzemp
left a comment
There was a problem hiding this comment.
Looks good to me! 🎉 (I've read through the code and tested in the aggregate data entry app).
Are we going to extend this to SimpleSingleSelect component as well? (The docs say we're planning on deprecating SingleSelect (https://github.com/dhis2/ui/blob/master/docs/docs/components/select.md?plain=1#L41) though I don't know if we've ever moved forward with that, but we seem to be using both in our apps.
We might also want to add some notes in the select documentation for this (above the notes generated from the props) to explain the behaviour.
| loading: PropTypes.bool, | ||
| loadingText: PropTypes.string, | ||
| maxHeight: PropTypes.string, | ||
| /** Sets a maximum width for the dropdown menu */ |
There was a problem hiding this comment.
these need to be defined as 'px', right? I tried for example percentages, and they did not work. If the idea is that we just use 'px', it might be good to update the description here (as it flows through into documentation for component)
| const flexible = menuMinWidth || menuMaxWidth | ||
| const width = flexible ? 'fit-content' : inputWidth | ||
| const flexibleMinWidth = menuMinWidth | ||
| ? `max(${inputWidth}, ${menuMinWidth})` |
There was a problem hiding this comment.
just curious: are we using the css calc definition here to avoid issues with taking the max() ourselves and just passing the resulting number?
3 participants
Implements LIBS-837
Description
SingleSelectandMultiSelectmeasure 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 —
menuMinWidthandmenuMaxWidth— onSingleSelect,MultiSelect,SingleSelectField, andMultiSelectField. They are forwarded through the sharedSelect/MenuWrapperstack.Known issues
With only
menuMinWidth(nomenuMaxWidth), the menu can grow without an upper bound for very long option labels;menuMinWidthandmenuMaxWidthshould be used together when labels can vary significantly in length.Checklist
Screenshots
menuMaxWidthis slightly greater than the width of the input, but less than the width of the options:with
menuMinWidth: