当前位置：首页 > news >正文

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

news 2025/6/25 9:10:14

右上角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><DialogTitleaction={<DialogTrigger action="close"><Buttonref={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;