Select Option Popover not positioned correctly

[rakshans1]

Select component popover is not positioned correctly when the option is a long list and the selected option is not in the top

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Option position gets misplaced when to selected option goes down the list

Steps to Reproduce 🕹

Link:

1. https://codesandbox.io/s/laughing-tree-d1epm

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1
React	v16.8.6

[eps1lon]

An issue with where the contentAnchor for the Popover is determined in Menu. It's one of the concerns I had while rewriting the tests. It's probably easier to have the Popover position fixed but scroll to the selected element instead doing position calculations. Those are always tricky and do not compose well with custom styling.

I think it's better to rework how dropdowns are displayed (actual dropdown) instead of fixing this issue. But if someone has a fix I'm happy to accept a PR.

[siriwatknp]

Base UI should handle this behavior.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@rakshans1 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.