fluent UI v9版本Dialog右上角x按钮聚焦问题解决

右上角x按钮聚焦效果展示
在这里插入图片描述
第一次点击不会聚焦，第二次或多次点击会出现这种情况。如果多个地方公用一个页面里，这个页面包含这个组件，那其它页面刚打开弹框就是聚焦状态，是个样式的问题。
解决：

import * as React from 'react';
import { Button } from '@fluentui/react-components';
import { Dialog, DialogSurface, DialogContent, DialogTrigger } from '@fluentui/react-dialog';
import { Dismiss24Regular } from '@fluentui/react-icons';
 
const DialogExample = () => {
  const [open, setOpen] = React.useState(false);
  const buttonRef= React.useRef<HTMLButtonElement>(null);
 
  React.useEffect(() => {
    if (!open && buttonRef.current) {
      buttonRef.current.blur();
    }
  }, [open]);
 
  return (
<div>
<Dialog open={open} onOpenChange={(event, data) => setOpen(data.open)}>
<DialogTrigger>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogSurface>
<DialogBody>
          <DialogTitle
            action={
              <DialogTrigger action="close">
                <Button
                  ref={buttonRef}
                  appearance="subtle"
                  aria-label="close"
                  icon={<Dismiss24Regular />}
                />
              </DialogTrigger>
            }
          >
            Dialog title
          </DialogTitle>
			<DialogContent>
				<input placeholder="Input something" />
			</DialogContent>
	</DialogBody>
</DialogSurface>
</Dialog>
</div>
  );
};

export default DialogExample;