Фокус на TextField не работает, когда кнопка нажата в диалоге - Material UI

Question

Моя цель - установить фокус на TextField пользовательского интерфейса материала после закрытия диалогового окна, нажав кнопку в этом диалоговом окне.

Следующий фрагмент кода работает, когда я вызываю его с кнопки, которой нет вкомпонент диалога:

focusTitle = () => {
  this.setState({ isOpen: false });
  this.myRef.current.focus();
};

Код кнопки:

<Button onClick={this.focusTitle} />

Код текстового поля, на котором я хочу сосредоточиться:

<TextField
  inputRef={this.myRef}
  label="Title"
  id="title"
  multiline
  rowsMax="4"
  value={this.state.title}
  autoFocus={true}
  className={classes.title}
  helperText="Enter a catchy title"
  onChange={e => this.onTitleChange(e.target.value)}
/>

Но как только я пытаюсьвызовите focusTitle () из кнопки в диалоговом окне, это не вызывает фокусировку.

Код диалога:

<Dialog
  open={this.state.isOpen}
  onClose={this.focusTitle}
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
  >

  <DialogTitle id="alert-dialog-title">{"Warning"}</DialogTitle>

  <DialogContent>
    <DialogContentText id="alert-dialog-description">
      Warning Message!
    </DialogContentText>
  </DialogContent>

  <DialogActions>
    <Button onClick={this.focusTitle} color="primary">
      OK
    </Button>
  </DialogActions>
</Dialog>

У всех есть идеи, почему мой .focus () не работаетв случае с диалогом?Если я регистрирую this.refs.myRef в обоих случаях, он показывает одинаковый результат.

Спасибо!

Answer 1

Ваш диалог, вероятно, имеет закрывающую анимацию.Пока анимация запущена, функция focus() не будет вызываться правильно.

Чтобы предотвратить это, создайте обратный вызов для анимации или тайм-аут на время анимации, чтобы вызвать focus() потом.Как это:

focusTitle = () => {
  this.setState({ isOpen: false });

  setTimeout(
    function() {
      this.myRef.current.focus();
     }
    .bind(this),
    500 // Change to duration of the animation
};