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

Question

假设我有一个按钮可以打开 Dialog 组件。该按钮具有自定义 theming/styling 以指定各种状态，其中之一是 :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 应该在模式关闭时自动应用于按钮。我该如何阻止它？

我试过这个：

我可以给按钮添加一个引用，并确保在各个地方手动取消对按钮的聚焦。在 Dialog 的 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

即使我找到了完全正确的事件处理程序来模糊按钮，这样样式看起来是正确的，这也不是我想要在有很多 [=21= 的应用程序中为每个 Dialog 做的事情] - Dialog 对。是否有一个 Material-UI 道具我可以用来在按钮上禁用这个 'auto-focus'，而不是必须创建一个 ref 并为每个 [=] 手动 .blur 14=]?

Answer 1

这是为了便于访问。您可以通过在对话框中添加道具 disableRestoreFocus 来禁用它 :)

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

Material UI - closing modal leaves focus state on button that opened it

focus

reactjs

material-ui

Codesandbox demonstrating the issue

我试过这个：

sandbox showing this very imperfect solution