触发对话框关闭后，材质 UI 工具提示保持打开状态

Posted 2023-02-22

【中文标题】触发对话框关闭后，材质 UI 工具提示保持打开状态

【英文标题】：Material UI Tooltip Stays Open after triggered Dialog is closed

【发布时间】：2018-10-11 20:39:37

【问题描述】：

我的假设是对话框的状态导致了问题，但我无法弄清楚这一点。在单击 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>
    );
  

【问题讨论】：

我试过你的代码，我得到了同样的东西......我在 material-ui github 页面上发现了一个看起来类似行为的问题。 github.com/mui-org/material-ui/issues/11186我认为这只是库中的一个错误。

【参考方案1】：

参见问题#9624：

这是预期的行为。这样做是出于可访问性考虑。您有两个选择，要么禁用工具提示对焦点事件的响应，要么禁用对话框恢复焦点行为。

1.禁用对焦点事件的工具提示响应 (docs)

<Tooltip disableTriggerFocus=true />

2。禁用对话框恢复焦点行为 (docs)

<Dialog disableRestoreFocus=true />

【讨论】：

它在开始时被标记但值得重复：这种行为是故意的，对某些用户很重要。除非您非常了解自己在做什么，否则请不要修改它，否则您很可能会使您的应用程序无法供残障人士使用。如果我在一个大的 UI 中一直使用选项卡来访问此按钮，然后它失去焦点并且我必须再次这样做，那么我将比必须查看工具提示更加复杂。

第二个选项对我有用。虽然我现在会考虑不禁用它，因为我知道它为什么会这样工作。

【参考方案2】：

根据这个文档设置disableFocusListener=truehttps://material-ui.com/api/tooltip/