Material UI Tooltip Stays Open after triggered Dialog is closed

Question

My assumption is the state of the Dialog is causing the issue, but I have not been able to figure this out. The Tooltip works as intended until the IconButton is clicked. The Dialog pops up as it should but when the dialog is exited, the Tooltip pops up as active.

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>
    );
  }
}

Answer 1

See issue #9624:

This is the expected behavior. It's done for accessibility considerations. You have two options, either disable the tooltip response to focus events or disable the dialog restore focus behavior.

1. Disable the tooltip response to focus events (docs)

<Tooltip disableTriggerFocus={true} />

2. Disable the dialog restore focus behavior (docs)

<Dialog disableRestoreFocus={true} />

Answer 2

set disableFocusListener={true} according to this doc https://material-ui.com/api/tooltip/