Материал UI Tooltip Осталось открытым после срабатывания Диалог закрыт

Мое предположение заключается в том, что состояние диалога вызывает проблему, но я не смог это понять. Всплывающая подсказка работает по назначению, пока не будет нажата кнопка IconButton. Диалог появляется, как следует, но когда диалог выходит из него, всплывающая подсказка всплывает как активная.

class DeleteDocument extends React.Component {
  state = {
    open: false,
  };

  onDeleteFile() {
    try {
      ensureJobIsUnlocked();
    } catch (err) {
      return;
    }

    const confirmedByUser = true;
    if (confirmedByUser) {
      this.props.onDeleteFile(this.props.selectedDocument.id);
      this.setState({ open: false });
    }
  }

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Tooltip id="tooltip-icon" title="Delete Document">
          <div>
            <IconButton
              disabled={(this.props.selectedDocument == null)}
              onClick={this.handleClickOpen}
            >
              <DeleteIcon />
            </IconButton>
          </div>
        </Tooltip>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{'Delete Document'}</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              This will delete the currently active PDF/Component Design. Are you sure you want to do this?
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.onDeleteFile.bind(this)} color="primary" autoFocus>
              Delete
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Ответы

Ответ 1

Смотрите выпуск # 9624:

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

1. Отключите реакцию всплывающей подсказки на события фокуса (документы)

<Tooltip disableTriggerFocus={true} />

Edit Material-ui - tooltip disable restore focus trigger

2. Отключите диалоговое окно восстановления фокуса (документы)

<Dialog disableRestoreFocus={true} />

Edit Material-ui - tooltip disable restore focus