[Select] Open popup below button #26200
Conversation
oliviertassinari
added
design: material
|
@mnajdova I'm facing a dilemma on this one. In order for the UI to look good, we need to add a gap between the textbox and the listbox, as done in https://next--material-ui.netlify.app/components/menus/#customized-menu, but what's the best way to do it? The options:
|
|
@oliviertassinari Let's not add the gap due to material design spec and may be just add demo how to add the gap should be enough in my opinion. https://material.io/components/menus#exposed-dropdown-menu |
|
@siriwatknp Ok, fair enough; I'm removing the margin from the Autocomplete per #18136. |
oliviertassinari
force-pushed
the
select-deploy-below
branch
from
cc87a08
to
7f6098c
Compare
Co-authored-by: Marija Najdova <mnajdova@gmail.com>
|
Note that the border radius is wrong for the filled input variant https://material.io/components/menus#exposed-dropdown-menu
|
| @@ -495,6 +495,14 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { | |||
| anchorEl={displayNode} | |||
| open={open} | |||
| onClose={handleClose} | |||
| anchorOrigin={{ | |||
| vertical: 'bottom', | |||
| horizontal: 'center', | |||
There was a problem hiding this comment.
Why "center"? It makes our <Select /> looks like this:
Closes #18493
Address point 1. of #18136