18

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.

5 Answers 5

34

To have a dynamic menu based on elements inside the menu itself you need to customize the Autocomplete's PopperComponent property in this way:

  1. Define a custom Popper:

    const PopperMy = function (props) {
       return <Popper {...props} style={styles.popper} placement="bottom-start" />;
    };
    
  2. In Popper style, set the width to "fit-content":

    const styles = (theme) => ({
       popper: {
          width: "fit-content"
       }
    });
    
  3. Pass the component PopperMy to Autocomplete:

    <Autocomplete
       PopperComponent={PopperMy}
       ...  
    />
    

Here is your codesandbox modified.

9
  • 2
    Thanks for the elaborate answer, but what i'm looking for is the opposite of what you showed. I want the Autocomplete (the TextField part) to stay the same, predefined, width and the menu (the window that opens and shows a list of all the available items), to have the width depending on the length of the items. Aug 26, 2020 at 8:28
  • @VladiFeldman So for example you want that the film title "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb" appears in 1 line in menu (and not in 2 lines) correct? Aug 26, 2020 at 8:35
  • 1
    Correct sir! The width of the menu should be determined by the items inside it. Aug 26, 2020 at 14:56
  • @VladiFeldman I have updated my answer (and the codesandbox). I hope this is what you are looking for :) Aug 26, 2020 at 18:11
  • 3
    @NachoLibre in this case you have to set the width in Popper style BUT you cannot use styles: you have to force width style with in-line style. Something like <Popper {...props} style={{ width: "370px" }} placement="bottom-start" />. I don't know why it doesn't work with styles... Sep 25, 2020 at 12:28
3

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:

4
  • 4
    the 'fullWidth' makes the Autocomplete component take the full width of it's container. I don't want to change the width of the whole component, just the menu itself. Aug 25, 2020 at 13:20
  • check the demo link that I attached, you can keep the autocomplete width different than menu width. Aug 25, 2020 at 13:23
  • Please see my latest edit. I added another sandbox with Select component with the desired behavior. Aug 25, 2020 at 13:37
  • This is correct.. this works when @material-ui .. and not for @ mui
    – C Sharper
    Apr 29, 2022 at 10:27
1

you can pass this props:

componentsProps={{ popper: { style: { width: 'fit-content' } } }}

to Autocomplete component

<Autocomplete
  ....
  componentsProps={{ popper: { style: { width: 'fit-content' } } }}
/>

2
  • The answer duplicates the accepted answer Mar 2 at 16:38
  • @VladiFeldman It's a simpler way than creating a custom popper component...
    – SaF
    Mar 4 at 23:08
-1

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

in MUI v5 you can use the sx prop.

-3

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

6
  • passing style to the Autocomplete component will change the width of the whole component. what i'm trying to achieve is that the width of the TextField is independent of the width of the menu. Aug 25, 2020 at 13:13
  • Thanks for the quick answer. I'll update my question to make it clearer. Aug 25, 2020 at 13:15
  • Ahh I misinterpret wrong. Cant you directly set style on TextField than? Aug 25, 2020 at 13:17
  • Again, the problem is not the TextField but the Menu. Aug 25, 2020 at 13:21
  • Can you put one example or better image. What you want to do? Aug 25, 2020 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.