Блог

Я использую текстовое поле автозаполнения пользовательского интерфейса material в своем проекте внутри диалогового окна. Проблема в том, что когда я устанавливаю значение по умолчанию или первое значение, вы можете видеть, как заполнитель перемещается при открытии диалогового окна.

https://codesandbox.io/embed/material-ui-autocomplete-forked-xwd3k?размер шрифта=14 и скрытая навигация=1 и тема=темная

Вот код

 import React from "react";
import ReactDOM from "react-dom";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField } from "@material-ui/core";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";

import "./styles.css";

function App() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    setOpen(false);
  };

  return (
    <>
      <Dialog
        onClose={handleClose}
        aria-labelledby="simple-dialog-title"
        open={open}
      >
        <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
        <Autocomplete
          freeSolo
          id="free-solo-demo"
          defaultValue={"a"}
          options={["a", "b", "c"]}
          renderInput={(params) => (
            <TextField
              {...params}
              label="freeSolo"
              margin="normal"
              variant="outlined"
              fullWidth
            />
          )}
        />
      </Dialog>
      <div>
        <br />
        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
          Open simple dialog
        </Button>
      </div>
    </>
  );
}
 

Есть ли способ увидеть заполнитель, уже исправленный при открытии диалогового окна? У меня есть другое автозаполнение с несколькими, и это текстовое поле вообще не выдает мне эту ошибку.

Добавьте InputLabelProps в TextField компонент следующее.

 <TextField
  {...params}
  InputLabelProps={{ // this part
    shrink: true
  }}
  label="freeSolo"
  margin="normal"
  variant="outlined"
  fullWidth
/>              
 

Если вы проверите реализацию компонента TextField, вы увидите, что опора для входной метки будет надрезана, если параметр shrink соответствует действительности.

Правка: Это означает, что если поле станет пустым, вам придется управлять им самостоятельно.