[Select] Follow material design guidelines

[peterchq]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When you click on a select that is not native, the options appear anchored randomly.

Expected Behavior 🤔

clicking on a select should expand the list op options attached to the bottom of the input as in material design guidelines e.g.
https://material-components.github.io/material-components-web-catalog/#/component/select

Steps to Reproduce 🕹

Click on any material-ui select
https://material-ui.com/components/selects/

Steps:

1. click on a non-native select

Context 🔦

I am trying to comply with material design guidelines

Your Environment 🌎

Tech	Version
Material-UI	v4.?.?
React
Browser
TypeScript
etc.

[eps1lon]

I am trying to comply with material design guidelines

Could you link to a page on material.io showing how Selects open? The link you provided uses a reference implementation that is (as are we sometimes) not always following the latest guidelines.

[peterchq]

https://material.io/develop/web/components/input-controls/select-menus/ links to https://material-components.github.io/material-components-web-catalog/#/component/select
also https://rmwc.io/select-menus which uses the material reference

I would say the reference implementation should be used as a reference

[eps1lon]

I would say the reference implementation should be used as a reference

I think the spec should be used as a reference. Material components web sometimes don't follow the guidelines either.

[peterchq]

I would say the reference implementation should be used as a reference

I think the spec should be used as a reference. Material components web sometimes don't follow the guidelines either.

can you provide a link to a spec that includes specific components? the only one i can find is above

[eps1lon]

can you provide a link to a spec that includes specific components?

https://material-ui.com/getting-started/supported-components/#supported-components

With regards to Select I don't have any which is why I asked you.

[peterchq]

can you provide a link to a spec that includes specific components?

https://material-ui.com/getting-started/supported-components/#supported-components

With regards to Select I don't have any which is why I asked you.

see above

[peterchq]

having the options randomly floating away from the input and sometimes obscuring it is problematic

[kybarg]

@eps1lon I think we have good example here https://material.io/components/menus/menus.html#exposed-dropdown-menu

[oliviertassinari]

random places

@peterchq The position of the select is not random. It's positioned so the selected value displays on top of the closed select state. This behavior can be found on native platforms, like macOS or Windows Edge.

macOS Chrome, Safari

Windows Edge

Windows FireFox, Chrome

I think the spec should be used as a reference. Material components web sometimes don't follow the guidelines either.

@una encourages to refer to material components web when in doubt. But I tend to agree with @eps1lon. It should be significantly simpler to author visual mockups than HTML + JS + CSS, from this perspective, I think that following the visual of material.io should be preferred.

I am trying to comply with material design guidelines

We have started a similar thread in #18136 (comment) and #17636 (comment) and #15055.

link

---

I have run a benchmark on some design system to compare what's more popular:

• appears over: Vuetify, Material-UI, Angular Material
• appears under: antd (select), elatic ui (superselect), zendesk garden, palentir blueprint (select), semantic ui (dropdown), Atlaskit, rsuitejs, microsoft fabric
• native: elastic ui (select), segment evergreen, palentir blueprint, IBM carbon, Pinterest Gastalt, , shopify polaris, priceline, kiwi orbit

[Holybasil]

For now, appears under is the default behavior in @mui/material/Select, how to set appears over?