Пользовательский интерфейс материала: StartAdornment не работает с меткой

Question

Стандартный вариант TextField не работает должным образом, если StartAdornment добавляется со значком.

Если я добавлюStartAdornmentэтикетка остается вверху. Я хочу, чтобы метка работала как заполнитель и поднималась, когда фокус находится в TextField.

Вот ссылка на SandBox:

      
export const Temp = () => {
  return (
    <div>
      <Grid sx={{ mt: 1.5 }}>
        <TextField
          variant="standard"
          required
          fullWidth
          label="Enter Mobile Number"
          autoFocus
          InputProps={{
            startAdornment: (
              <LoginRoundedIcon
                sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
                position="start"
              >
                <Visibility></Visibility>
              </LoginRoundedIcon>
            ),
          }}
        />
      </Grid>
    </div>
  );
};

Answer 1

Это ограничение , которое мы можем преодолеть с помощью такого обходного пути:

      const [focused, setFocused] = useState(false);
const [currentValue, setCurrentValue] = useState("");


<TextField
      variant="standard"
      required
      fullWidth
      label="Enter Mobile Number"
      InputProps={{
        startAdornment: (
          <LoginRoundedIcon
            sx={{ p: 0.25, color: "#A9A9A9", ml: -0.5, mr: 1 }}
            position="start"
          >
            <Visibility></Visibility>
          </LoginRoundedIcon>
        )
      }}
      InputLabelProps={{
        shrink: focused || currentValue,
        style: { marginLeft: 30 }
      }}
      value={currentValue}
      onChange={(e) => setCurrentValue(e.target.value)}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
/>

Вы можете взглянуть на эту песочницу , чтобы увидеть живой рабочий пример этого обходного пути.