Material UI - 关闭模式将焦点状态留在打开它的按钮上答案

【问题标题】：Material UI - closing modal leaves focus state on button that opened itMaterial UI - 关闭模式将焦点状态留在打开它的按钮上
【发布时间】：2021-09-03 15:26:30
【问题描述】：

假设我有一个打开Dialog 组件的按钮。该按钮具有自定义主题/样式以指定各种状态，其中之一是:focus 状态：

const useStyles = makeStyles({
  root: {
    "&:focus": {
      backgroundColor: "#3A7DA9"
    }
  }
});

export default function App() {
  const [open, setOpen] = useState(false);
  const classes = useStyles();

  return (
    <div className="App">
      <Button 
        id="button-that-opens-modal"
        className={classes.root} 
        onClick={() => setOpen(true)} 
      >
        Open the modal
      </Button>
      <Dialog open={open}>
        <h3>This is the modal</h3>
        <Button onClick={() => setOpen(false)}>
          Close
        </Button>
      </Dialog>
    </div>
  );
}

我注意到，每次我有这种模式时，（一个按钮打开一个对话框模式），当模式关闭时，#button-that-opens-modal 留下一个:focus 状态，这看起来很糟糕造型方面。这是一个快速的 gif：

Codesandbox demonstrating the issue

这是一个已知问题吗？我不明白为什么在模态关闭时应该将:focus 自动应用于按钮。我怎样才能阻止这种情况？

我试过这个：

我可以为按钮添加一个引用，并确保在各个位置手动取消焦点按钮。在对话框的onExited 方法中添加它可以工作，但会闪烁焦点状态一秒钟：

export default function App() {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef();
  const classes = useStyles();

  return (
    <div className="App">
      <Button
        ref={buttonRef}
        className={classes.root}
        onClick={() => setOpen(true)}
      >
        Open the modal
      </Button>
      <Dialog
        open={open}
        TransitionProps={{
          onExited: () => {
            buttonRef.current?.blur(); // helps but creates a flash
          }
        }}
      >
        <h3>This is the modal</h3>
        <Button onClick={() => {setOpen(false)}}>
          Close
        </Button>
      </Dialog>
    </div>
  );
}

sandbox showing this very imperfect solution

即使我找到了正确的事件处理程序来模糊按钮以使样式看起来正确，这也不是我想要为具有许多 Button - Dialog 对的应用程序中的每个 Dialog 做的事情.是否有一个 Material-UI 道具我可以用来禁用按钮上的“自动对焦”，而不是必须为每个 Dialog 创建一个引用并手动 .blur 它？

【问题讨论】：

这是为了便于访问。您可以通过在对话框中添加 prop disableRestoreFocus 来禁用它
谢谢！如果您愿意，请将其发布为答案，我会将其标记为这样

标签： reactjs material-ui focus

【解决方案1】：

这是出于可访问性目的。您可以通过在对话框中添加 prop disableRestoreFocus 来禁用它:)

【讨论】：