Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Joy] Select popup should have max-height #36156

Merged
merged 5 commits into from
Feb 22, 2023
Merged

[Joy] Select popup should have max-height #36156

merged 5 commits into from
Feb 22, 2023

Conversation

Vivek-Prajapatii
Copy link
Contributor

@Vivek-Prajapatii Vivek-Prajapatii commented Feb 12, 2023 •
edited by hbjORbj
Loading

Closes #36115

@Vivek-Prajapatii

This comment was marked as outdated.

Sign in to view
@mui-bot
Copy link

mui-bot commented Feb 12, 2023 •
edited
Loading

Netlify deploy preview

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 5925766

@hbjORbj hbjORbj added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy labels Feb 12, 2023
@hbjORbj hbjORbj requested a review from siriwatknp February 12, 2023 23:26
@hbjORbj
Copy link
Member

hbjORbj commented Feb 12, 2023

Please run yarn prettier and push: https://circleci.com/gh/mui/material-ui/483515

@hbjORbj hbjORbj changed the title added slotprops to add maxheight in select component [Joy] Select popup should have max-height Feb 12, 2023
@siriwatknp
Copy link
Member

@Vivek-Prajapatii Thanks for opening the PR but I think you have to fix the implementation, not the demo file.

siriwatknp
siriwatknp requested changes Feb 13, 2023
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update the implementation instead of the demo file.

@Vivek-Prajapatii

This comment was marked as outdated.

Sign in to view
@siriwatknp
Copy link
Member

@Vivek-Prajapatii you can add max-height to SelectListbox in /packages/mui-joy/src/Select/Select/tsx.

@Vivek-Prajapatii

This comment was marked as outdated.

Sign in to view
siriwatknp
siriwatknp reviewed Feb 21, 2023
View reviewed changes
packages/mui-joy/src/Select/Select.tsx Outdated
minWidth: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
maxHeight: 300,
overflow: 'auto',
width: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Vivek-Prajapatii May I ask why minWidth is changed to width?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

width will be overridden by Popperjs, so it should be minWidth.

This comment was marked as outdated.

Sign in to view

siriwatknp
siriwatknp approved these changes Feb 21, 2023
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks for submitting the PR! I have updated the docs and demos, let me know what you think.

@Vivek-Prajapatii

This comment was marked as outdated.

Sign in to view
This was referenced Feb 22, 2023
Closed
Closed
@mnajdova mnajdova merged commit 910d3a4 into mui:master Feb 22, 2023
siriwatknp pushed a commit to mnajdova/material-ui that referenced this pull request Feb 24, 2023
@Vivek-Prajapatii @siriwatknp
[Joy] Select popup should have max-height (mui#36156)
2579b29
oliviertassinari
oliviertassinari reviewed Aug 23, 2023
View reviewed changes
packages/mui-joy/src/Select/Select.tsx
@@ -240,6 +241,8 @@ const SelectListbox = styled(StyledList, {
'--List-item-stickyTop': 'calc(var(--List-padding, var(--List-divider-gap)) * -1)', // negative amount of the List's padding block
...scopedVariables,
minWidth: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
maxHeight: '44vh', // the best value from what I tried so far which does not cause screen flicker when listbox is open.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO we should take a lot more vertical space, Radix feels better on my 14" screen:

Screenshot 2023-08-23 at 11 51 48

Same as macOS and Material UI:

Screenshot 2023-08-23 at 11 53 12 Screenshot 2023-08-23 at 11 52 36

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created #38610

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

@oliviertassinari oliviertassinari oliviertassinari left review comments

@siriwatknp siriwatknp siriwatknp approved these changes

Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Joy] Select popup should have max-height
6 participants
@Vivek-Prajapatii @mui-bot @hbjORbj @siriwatknp @oliviertassinari @mnajdova