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

Question

假设我有一个打开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 演示了该问题

这是一个已知的问题？我不明白为什么: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>
  );
}

沙箱显示了这个非常不完美的解决方案

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

Answer 1

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