When using the Select from Material-UI, there's a prop there called 'autoWidth' which sets the width of the popover to match the width of the items inside the menu.
Is there a similar option for the Autocomplete component?
what i'm trying to achieve is that the width of the TextField is independent of the width of the menu, and the width of the menu is determined by the menu items rather than a hard-coded 'width.
What I managed to find so far is an option to provide width to the 'paper' component using classes (see code below), but it's independent of the actual items' width and the position of the paper isn't adjusted to stay inside the window.
const styles = (theme) => ({
paper: {
width: "450px"
}
});
function ComboBox(props) {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
classes={{
paper: props.classes.paper
}}
getOptionLabel={(option) => option.title}
style={{
width: 300,
paddingLeft: "100px"
}}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
What i'm trying to achieve is a similar behavior to this codesandbox but using the Autocomplete component. Notice that width of the pop-up menu is taken from the menu items while the width of the Select component is hard-coded.