[SOLVED] Material UI Autocomplete dropdown direction

Material UI Autocomplete dropdown direction

Recently I have add Material UI to my project React. More particularly I try to use Autocomplete. But I have problem with the renderer, indeed the dropdown points horizontally and not vertically. So I have add it like that.

<Autocomplete
   disablePortal
   id="combo-box-demo"
   options={["mov1", "mov2", "movie3", "movie4", "movie5"]}
   sx={{ width: 300 }}
   renderInput={(params) => <TextField {...params} label="Movie" />}
/>

But when I run my app, the dropdown points horizontally. But with autocomplete doc https://mui.com/material-ui/react-autocomplete/, with same code, he points vertically. render in my app render doc

In my package.json I use these version :

"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.10.15",
"@mui/material": "^5.11.0",

So I looking for fix that on web, but i didn't find anything. Someone can help me ? Thanks

Solution

The issue is in custom CSS you applied to the ul element.