material-ui

MUI Select label does not properly fit on focus

I am using MUI Select component, the problem I'm having is that label doesn't fit on focus and starts to overlap with the dropdown field itself as in a screenshot below:

label overlapping

How can I fix this issue so that label on each dropdown is sized properly on focus, regardless of the label text length?

Below is the code snippet:

<FormControl
    sx={{
        width: "100%",
        "& .MuiOutlinedInput-root": {
            "&.Mui-focused fieldset": {
                borderColor: "#a6a8a7",
            },
        },
    }}
>
    <InputLabel
    sx={{
        fontSize: "13px",
        "&.Mui-focused": {
            color: "black",
            fontSize: "14px",
        },
    }}>
        Please select the reason for declining the request:
    </InputLabel>
    <Select
        label="Please select the reason for declining the request:"
    >
        <MenuItem value={1}>Redirect to another person</MenuItem>
    </Select>
</FormControl>

I've tried to adjust width on the notched outline but that doesn't seam to change anything:

"& .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline":
                                       {
                                           width: "auto",
                                       },

I don't have this issue with the TextField, only with the Select. Thank you for your time!

Solution

  • If you're changing the fontSize of InputLabel, add the fontSize in Select sx prop as well. Check the updated code below:

    <FormControl
    fullWidth
    sx={{
      '& .MuiOutlinedInput-root': {
        '&.Mui-focused fieldset': { borderColor: '#a6a8a7' },
      },
    }}
  >
    <InputLabel
      id="my-label-id"
      sx={{
        fontSize: 14,
        '&.Mui-focused': { color: 'black' },
      }}
    >
      Please select the reason for declining the request:
    </InputLabel>
    <Select labelId="my-label-id" label="Please select the reason for declining the request:" sx={{ fontSize: 14 }}>
      <MenuItem value={1}>Redirect to another person</MenuItem>
    </Select>
</FormControl>

    Few improvements: