[Select] Menu hides input field

[emlai]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

https://codesandbox.io/s/tender-bas-9pzkhx?file=/demo.js

Current behavior 😯

A long dropdown menu is positioned on top of the select input field:

Expected behavior 🤔

A long dropdown menu can be positioned below the input field, to avoid hiding it:

Context 🔦

Tried using anchorOrigin and transformOrigin (see codesandbox repro) as per #12208, but they didn't affect anything.

Your environment 🌎

No response

[ZeeshanTamboli]

@emlai Adding a maxHeight to the Menu can fix this. Take a look at the updated CodeSandbox.

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[emlai]

@ZeeshanTamboli Thanks, that worked!

On a related note, Autocomplete has maxHeight: 40vh by default, so it doesn't have this issue. I wonder if Select should have that default as well, for consistent behavior.

[ZeeshanTamboli]

On a related note, Autocomplete has maxHeight: 40vh by default, so it doesn't have this issue. I wonder if Select should have that default as well, for consistent behavior.

I am not sure. It could be a breaking change. Feel free to create a new issue if you think so. The other team members will reply on it.

[raccmonteiro]

@emlai Adding a maxHeight to the Menu can fix this. Take a look at the updated CodeSandbox.

it's a quick fix, not the right solution. In v4 this didn't happen