React Material UI: Outlined text field shows line through label

user_7882685 0
Viewed 1824

I'm using MUI 5 and React and I have this issue that the outlined text field shows line through the label as per the screenshot

Issue picture

I have no idea how to fix it.

My fields looks like this

<FormControl fullWidth variant="outlined">
      <InputLabel shrink id={labelId}>
        {label}
      </InputLabel>
      <Controller
        as={
          <Select
            displayEmpty
            name={name}
            labelId={labelId}
            id={name}
            label={label}
          >
            <MenuItem key={`no${name}`} value="">
              {intl.formatMessage({
                defaultMessage: 'No proxy number',
              })}
            </MenuItem>
            {items.map(pn => (
              <MenuItem key={pn.id} value={pn.id}>
                <ListItemIcon>
                  <img
                    src={pn?.country?.flagIconUrl}
                    alt={pn.countryCode}
                    width="20px"
                    height="15px"
                  />
                </ListItemIcon>
                {pn.value}
              </MenuItem>
            ))}
          </Select>
        }
        name={name}
        control={control}
      />
      <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

Then the above is used as a function called SelectFormInput to make the specific fields

<Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="proxyNumber"
              name="proxyNumber"
              items={proxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Proxy phone Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number used by site users',
              })}
            />
          </Grid>

          <Grid item xs={6}>
            <SelectFormInput
              control={control}
              labelId="inboundProxyNumber"
              name="inboundProxyNumber"
              items={inboundProxyNumbers}
              label={intl.formatMessage({
                defaultMessage: 'Inbound Proxy Number',
              })}
              helperText={intl.formatMessage({
                defaultMessage: 'Optional. Phone number seen by candidate',
              })}
            />
          </Grid>

I was unable to find any solution on the net for my specific situation.

material-ui reactjs
3 Answers

There is a <fieldset/> tag within the FormControl, and the <legend/> inside of it is making the white block possible.

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L142

https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L79

I am not sure in your case (<Select/>), but if you are trying to use raw input with the outlined style, you have to give label prop to the <OutlinedInput/>.

<FormControl fullWidth>
  <InputLabel>Phone</InputLabel>
  <OutlinedInput label="Phone" /> // without label="...", you get the line-through
</FormControl>
user_12279600

I found a solution that helped my specific situation. I had to add this

input={<OutlinedInput notched label={label} />}

Inside my

<Select
     displayEmpty
     name={name}
     labelId={labelId}
     id={name}
     input={<OutlinedInput notched label={label} />} />

And so the label UI has been fixed

Fixed label

user_78826850

you can also try add a background color to InputLabel, on createTheme, this works for me:

import { createTheme } from '@material-ui/core';

const theme = createTheme({
  overrides: {
    MuiInputLabel: {
      root: {
        backgroundColor: '#ffffff',
        paddingLeft: '4px',
        paddingRight: '4px'
      }
    }
  }
});

export default theme;

user_88622060
Related