javascriptcssmaterial-uidrop-down-menujsx

Can I Implement a Regular Drop-Down Menu/ Style Inside a MUI Select Component?


I am currently trying to implement the default drop-down menu appearance in my MUI Select Component.

Desired menu:

Desired menu

My Current Select Component:

My Current Select Component

I have tried wrapping my select element tag inside my FormControl component, this was close to what I wanted in terms of appearance, but wasn't a copy and paste and the functionality of the MUI select ceased to exist.

My Select component:

<Box sx={{ width: 'calc(32.5% - 10px)' }}>
                        <FormControl fullWidth >
                            <InputLabel>Month</InputLabel>
                            <Select
                                id="demo-simple-select"
                                value={month}
                                label="Month"
                                onChange={handleSelectMonth}
                                sx={{
                                    "&:hover:not(.Mui-focused)": {
                                        "&& fieldset": {
                                            borderColor: "#dadce0"
                                        },
                                    },
                                    ".MuiOutlinedInput-notchedOutline": {
                                        borderColor: '#dadce0',
                                    },
                                    '.MuiSvgIcon-root ': {
                                        fill: "#9e9e9e",
                                    }
                                }}
                            >
                                <MenuItem className="select-dropdown-MenuItems" value="January">January</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="February">February</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="March">March</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="April">April</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="May">May</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="June">June</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="July">July</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="August">August</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="September">September</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="October">October</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="Novemeber">Novemeber</MenuItem>
                                <MenuItem className="select-dropdown-MenuItems" value="December">December</MenuItem>
                            </Select>
                        </FormControl>
</Box>

What I tried wrapping in my FormControl tags:

<select
                        class={`${errorCondition === 'incompleteBirthday' || errorCondition === 'isWrongFormat' ? 'error-third-adjust-1' : "input-third-adjust-1"} ${isMonthSelected ? 'select-selected' : 'select-color'}`}
                        value={month}
                        onChange={handleSelectMonth}
                        onClick={handleMonthClick}
                        onBlur={handleMonthBlur}
                    >
                        <option value="" hidden>{month === '' ? monthPlaceholder : month}</option>
                        <option className="select-dropdown-options" value="January">January</option>
                        <option className="select-dropdown-options" value="February">February</option>
                        <option className="select-dropdown-options" value="March">March</option>
                        <option className="select-dropdown-options" value="April">April</option>
                        <option className="select-dropdown-options" value="May">May</option>
                        <option className="select-dropdown-options" value="June">June</option>
                        <option className="select-dropdown-options" value="July">July</option>
                        <option className="select-dropdown-options" value="August">August</option>
                        <option className="select-dropdown-options" value="September">September</option>
                        <option className="select-dropdown-options" value="October">October</option>
                        <option className="select-dropdown-options" value="Novemeber">Novemeber</option>
                        <option className="select-dropdown-options" value="December">December</option>
</select>

Would appreciate it greatly if anyone has a solution to this!


Solution

  • The native property could be what you are looking for.

    Use the MUI <Select> component, and set the native property to true. Then use <option> (not <MenuItem>) for the options.