reactjswebmaterial-ui

Material UI Select menu displays horizontally instead of vertically


I have a Material-UI Box with 2 components inside: a TextField that acts as a Select with a menu created with MenuItems, and a button below this TextField that deletes the selected content in the select. The problem is that without placing the button, the menu of the Select component does appear correctly vertically, but adding the button below this component causes the menu to display horizontally.

Select without button

Select with button Layout with button

<Box sx={{ position: "absolute", top: "57%", left: "13%", width: "11%" }}>
<TextField
    select
    variant="outlined"
    label="Bebida 1"
    fullWidth
    name="pos1"
    value={cocktails.pos1}
    onChange={handleSelectChange}
    SelectProps={{
        MenuProps: {
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }
    }}
>

    {allDrinks.map(drink => (
        <MenuItem key={drink} value={drink}>{drink}</MenuItem>
    ))}
</TextField>

{cocktails.pos1 !== "" &&
    <Box sx={{ position: "absolute", left: "30%", alignItems: "center", align: "center" }}>
        <IconButton color="secondary" aria-label="Eliminar bebida"
            onClick={(e) => {
                e.preventDefault();
                handleRemove('remove_pos1')
            }}
        >
            <Icon style={{ fontSize: "2vw" }}>highlight_off</Icon>
        </IconButton>
    </Box>
}

I repeat this with 6 Select componenets and 6 buttons, and with only adding one button all of the select menu change to vertical.

Is there a way to display the Select menu vertically, so that it is above the button?


Solution

  • Are you importing your components only from the @mui/material/ package or using material and core packages together?

    If you are trying to import some of them from core package and some of them from material package, they distort each other. I've had a very similar problem and I solved it importing all of them (Box, Button and TextField) from mui material package and taking core package out.