reactjs - 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 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

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

Answer 1

这是为了方便访问。您可以通过在对话框上添加属性 disableRestoreFocus 来禁用它:)