Material UI Tooltip在触发的Dialog关闭后仍保持开启状态

这个问题我之前也碰到过类似的，大概率是Dialog关闭后的焦点回退或者事件冒泡导致Tooltip意外触发了激活状态，咱们一步步来排查和解决：

核心原因推测 #

Material UI的Dialog组件默认在关闭后，会把焦点自动恢复到触发它的元素（也就是你的IconButton）。而Tooltip的激活逻辑通常会监听元素的focus/hover事件，当焦点突然回到IconButton时，就会误触发Tooltip的激活状态。

具体解决方案 #

1. 阻止Dialog的焦点回退（最直接的解决办法） #

给Dialog添加disableRestoreFocus属性，关闭它默认的焦点恢复行为：

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

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

  onDeleteFile() {
    try {
      ensureJobIsUnlocked();
    } catch (err) {
      return;
    }
    const confirmedByUser = true;
    if (confirmedByUser) {
      this.props.onDeleteFile(this.props.selectedDocumentId);
      this.setState({ open: false });
    }
  }

  render() {
    return (
      <>
        <Tooltip title="Delete Document">
          <IconButton onClick={() => this.setState({ open: true })}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
        <Dialog
          open={this.state.open}
          onClose={this.handleDialogClose}
          // 关键：关闭焦点恢复，避免触发Tooltip的focus激活
          disableRestoreFocus
        >
          <DialogTitle>Confirm Deletion</DialogTitle>
          <DialogContent>
            Are you sure you want to delete this document?
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleDialogClose}>Cancel</Button>
            <Button onClick={() => this.onDeleteFile()}>Delete</Button>
          </DialogActions>
        </Dialog>
      </>
    );
  }
}

2. 手动重置Tooltip状态（可选补充） #

如果上面的方法还没解决，你可以给Tooltip加一个ref，在Dialog关闭时手动关闭Tooltip：

// 在组件里定义ref
tooltipRef = React.createRef();

handleDialogClose = () => {
  this.setState({ open: false });
  // 手动关闭Tooltip
  this.tooltipRef.current?.close();
};

// 给Tooltip绑定ref
<Tooltip title="Delete Document" ref={this.tooltipRef}>
  {/* IconButton内容 */}
</Tooltip>

3. 阻止事件冒泡（备选方案） #

如果是点击Dialog关闭按钮时事件冒泡到IconButton导致的问题，可以在关闭按钮的点击事件里阻止冒泡：

<Button onClick={(e) => {
  e.stopPropagation();
  this.handleDialogClose();
}}>Cancel</Button>

内容的提问来源于stack exchange，提问作者Seth Duncan