Control popover location anchor for SelectField

Question

Does anyone know how to control the location of the popover of SelectField?

I know that selectfield holds a dropdown menu in it and doesn't contain a popover but thought that maybe it's possible to control this somehow.

Answer 1

I actually faced the same issue.

I don't think it's possible, at least it's not part of configurable properties. I looked at SelectField source, and apparently, even though SelectField is using DropDownMenu underneath, and DropDown is using PopOver underneath, but the configuration of anchorOrigin is hardcoded.

https://github.com/callemall/material-ui/blob/master/src/DropDownMenu/DropDownMenu.js#L9

const anchorOrigin = {
  vertical: 'top',
  horizontal: 'left',
}; 

Answer 2

It is possible indeed:

<SelectField dropDownMenuProps={{anchorOrigin:{vertical:"center",horizontal:"left"}}}>
    <MenuItem value={1} primaryText="one" />
    <MenuItem value={2} primaryText="two" />
    <MenuItem value={3} primaryText="three" />
</SelectField>

If you need to exactly set up the positioning of your "popover" (which is actually a "dropdown menu"), I reckon you can try by overriding one of the different (style?) props of that menu: http://www.material-ui.com/#/components/dropdown-menu ("Properties" part)

An other way would be to use a popover instead...

Also, the new v1.0 beta just had its select component released ; it might give you a better control: https://material-ui-1dab0.firebaseapp.com/demos/selects/