'How can I change the width of Material UI Autocomplete popover

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" />
      )}
    />
  );
}

link to codesandbox

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.

reactjs material-ui

Solution 1:^[1]

To have a dynamic menu based on elements inside the menu itself you have 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.

Solution 2:^[2]

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:

Solution 3:^[3]

<Autocomplete fullWidth sx={{ width: 600 }} />}

in MUI v5 you can use the sx prop.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Steve Chambers
Solution 2	Kumar Nitesh
Solution 3	Tellisense

'How can I change the width of Material UI Autocomplete popover

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]