Как исправить ошибку фокуса текстового поля диалогового окна Material-UI? - PullRequest
Новая
       63

Как исправить ошибку фокуса текстового поля диалогового окна Material-UI?

0 голосов
/ 09 ноября 2019

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

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

Я использую диалоговое окно формы прямо из https://material -ui.com / components / dialogs / # form-dialogs . Я импортирую этот компонент в родительский компонент, чтобы использовать его. Он еще не связан ни с одной из моих функций.

Я создал дополнительные <input type="text" /> как внутри, так и снаружи тега Dialog, чтобы посмотреть, не возникает ли у меня такая же проблема. Те <input type="text" /> внутри тега Dialog имеют ту же проблему, но внешний работает нормально. 

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

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

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

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

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <input type="text" />
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <input type="text" />
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here. We will send updates
            occasionally.
          </DialogContentText>
          <input type="text" />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Email Address"
            type="email"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Есть идеи?

...