MUI自动完成从容器中生长出来 - React

Question

I am using MUI Autocomplete and I want it to stay within the container bounds. I am using AutoComplete inside a with the limitTags option set. When I click on the autocomplete, it extends out of the container. Is there a way to force it to be inside and just expand vertically instead of horizontally?

This is my code.

import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";

export default function LimitTags() {
  return (
    <Grid container>
      <Grid item md={2}>
        <Autocomplete
          multiple
          limitTags={2}
          id="multiple-limit-tags"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
          renderInput={(params) => (
            <TextField {...params} label="limitTags" placeholder="Favorites" />
          )}
        />
      </Grid>
    </Grid>
  );
}

This is my codesandbox link: https://codesandbox.io/s/exciting-glade-shmjfk?file=/demo.tsx

Please advice.

Answer 1

I checked you codesandbox and its working as you expect on 32 inch screen, but not on small devices and this is due to the <Grid/> compoent

You can check: https://mui.com/material-ui/react-grid/

Here is an example that work on both sizes:

export default function LimitTags() {
  return (
    <Grid container>
      <Grid item  xs={3.8} md={2}>
        <Autocomplete
          multiple
          limitTags={2}
          id="multiple-limit-tags"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
          renderInput={(params) => (
            <TextField {...params} label="limitTags" placeholder="Favorites" />
          )}
        />
      </Grid>
    </Grid>
  );
}