[Autocomplete] How to customize the popper width?

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

Summary 💡

Currently, the PopperComponent width is always set to anchorEl.clientWidth:

https://github.com/mui/material-ui/blob/ae87437fc6345b95c991c6e392eaf9f9a0f356e1/packages/mui-material/src/Autocomplete/Autocomplete.js#L597

I would like to be able to customize that so the dropdown can be a different width. It would probably make sense to also expose the placement of the popper. I’m not sure if it makes more sense to just expose PopperProps – I saw in this issue that you’re not the biggest fan of that approach: https://github.com/mui-org/material-ui/issues/18885#issuecomment-566494202

Examples 🌈

The search box on the material-ui docs is an example of where the dropdown is a different width than

Motivation 🔦

I have content in my dropdown that is wider than the search box and it currently has an annoying wrap. Also, having the textbox width expand with css like in the material-ui documentation can result in a mis-aligned and too-small popper.

[k2s]

This worked for me (as a new component created outside of a render function):

const PopperMy = function (props) {
  return (<Popper {...props} style={{ width: 250 }} placement='bottom-start' />)
}

then

<Autocomplete PopperComponent={PopperMy}>

[oliviertassinari]

You can provide a custom PopperComponent prop to change the positioning logic.