Reputation: 952
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.
Upvotes: 27
Views: 47118
Reputation: 1934
<Autocomplete
sx={{
"& .MuiInputBase-root": { height: "35px", backgroundColor: 'white' }, //update the styles here
}}
renderInput={(params) => (
<TextField
{...params}
fullWidth
id="product_sku"
InputLabelProps={{ shrink: true}}
error={false}
value={value?.sku_name || ''}
onChange={handleProductSearch}
/>
)}
</>
Upvotes: 0
Reputation: 464
you can pass this props:
componentsProps={{ popper: { style: { width: 'fit-content' } } }}
to Autocomplete component
<Autocomplete
....
componentsProps={{ popper: { style: { width: 'fit-content' } } }}
/>
Upvotes: 32
Reputation: 20118
We can use autocomplete componentsProps to change the paper styling in the following way
<Autocomplete
componentsProps={{
paper: {
sx: {
border: '1px solid lightgray',
marginLeft: 10.5,
width: 484,
}
}
}}
/>
Upvotes: 0
Reputation: 355
const CustomPopper = (props) => {
return (
<Popper
{...props}
placement="bottom"
sx={{
height: "10px",
}}
style={{ width: props.anchorEl.clientWidth, height: "5px" }}
/>
);
};
<Autocomplete
multiple
freeSolo
size="small"
id="tags-outlined"
options={allTags}
getOptionLabel={(option) => option}
// defaultValue={[]}
filterSelectedOptions
value={siteTags}
onChange={(event, newval) => {
setTags(newval);
}}
PopperComponent={CustomPopper}
renderInput={(params) => (
<TextField {...params} placeholder="Enter tags" />
)}
/>
you can use "props.anchorEl.clientWidth" in custome proper and much more
Upvotes: 1
Reputation: 11166
To have a dynamic menu based on elements inside the menu itself you need to customize the Autocomplete's PopperComponent
property in this way:
Define a custom Popper
:
const PopperMy = function (props) {
return <Popper {...props} style={styles.popper} placement="bottom-start" />;
};
In Popper
style, set the width to "fit-content":
const styles = (theme) => ({
popper: {
width: "fit-content"
}
});
Pass the component PopperMy
to Autocomplete:
<Autocomplete
PopperComponent={PopperMy}
...
/>
Here is your codesandbox modified.
Upvotes: 44
Reputation: 2014
<Autocomplete fullWidth sx={{ width: 600 }} />}
in MUI v5 you can use the sx prop.
Upvotes: -2
Reputation: 1652
Did you look into 'fullWidth' attribute of autocomplete api?
https://material-ui.com/api/autocomplete/
Here is an example which I think will fulfill your requirement
https://codesandbox.io/s/full-width-autocomplete-ph30d?file=/demo.js
fullWidth if true, will take the width of its container:
Upvotes: 3
Reputation: 5054
According to material official documentaion you can pass style
props:
<Autocomplete
id="combo-box-demo"
options={top100Films}
style={{ width: "450px" }}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
Here is the demo:https://codesandbox.io/s/material-demo-forked-qon1b
Upvotes: -3