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

失焦就好了,给close button设置style样式是无效的
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue3】自定义组件directiveapp.use()

历史小剧场 崇祯很勤政&#xff0c;崇祯并非王国之君&#xff0c;弘光很昏庸&#xff0c;弘光活该倒霉&#xff0c;几百年来&#xff0c;我们都这样认为。 但我们之所以一直这样认为&#xff0c;只是因为有人这样告诉我们。 之所以有人这样告诉我们&#xff0c;是因为他们希望我…

比较与深浅克隆

1.比较 &#xff08;1&#xff09;Comparable接口&#xff1a;&#xff08;重写compareTo方法&#xff09; 由于它是一个接口&#xff0c;而且在这个接口中只有一个compareTo方法&#xff0c;所以所有实现该接口的类都需要重写。这个compareTo方法相当于制定一个比较标准&…

pyinstaller将py文件打包成exe

pyinstaller将py文件打包成exe 一、为什么需要将python文件打包成exe文件?二、具体操作步骤一、为什么需要将python文件打包成exe文件? python文件需要在python环境中运行,也就是需要安装python解释器。有时我们自己写的python程序需要分享给自己的朋友、同事或者合作伙伴,…

封装一个websocket,支持断网重连、心跳检测,拿来开箱即用

封装一个websocket&#xff0c;支持断网重连、心跳检测 代码封装 编写 WebSocketClient.js import { EventDispatcher } from ./dispatcherexport class WebSocketClient extends EventDispatcher {constructor(url) {console.log(url, urlurl)super()this.url url}// #soc…

改进rust代码的35种具体方法-类型(二十一)-熟悉Cargo.toml版本使用

上一篇文章-改进rust代码的35种具体方法-类型(二十)-避免过度优化的诱惑 “如果我们承认SemVer是一个有损的估计&#xff0c;只代表可能变化范围的子集&#xff0c;我们可以开始将其视为一个钝器。”——Titus Winters&#xff0c;“谷歌软件工程&#xff08;OReilly&#xff0…

STM32_FSMC_HAL(介绍)

FSMC&#xff08;Flexible Static Memory Controller&#xff09;是STM32微控制器中的一种内存控制器&#xff0c;它允许微控制器与外部存储器接口&#xff0c;如SRAM、NOR Flash、NAND Flash和PSRAM等。FSMC特别适用于需要高速数据交换和大量数据存储的应用场景。 典型应用&a…

参数的读取

argparse函数的读取 这个是以函数的形式嵌入到脚本中的 def common_args():parser argparse.ArgumentParser(descriptioncommon config)parser.add_argument(--test, actionstore_true, help"test mode (load model and test dataset)")parser.add_argument(--ite…

AndroidStudio设置允许APP获取定位权限

1. 在AndroidManifest.xml中声明权限 常用的定位权限有以下两种&#xff1a; <uses-permission android:name"android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION"/>2. …

react跨组件通信Context

案例&#xff1a;现在有个父-子-孙组件 需要进行组件通信 import { useState } from "react"; // 创建上下文 const CountContext React.createContext();//子组件 const SonComponent (props) > {return (<div><h2>子组件</h2><Grandson…

【机器学习】让大模型变得更聪明

文章目录 前言1. 理解大模型的局限性1.1 理解力的挑战1.2 泛化能力的挑战1.3 适应性的挑战 2. 算法创新&#xff1a;提高模型学习和推理能力2.1 自监督学习2.2 强化学习2.3 联邦学习 3. 数据质量与多样性&#xff1a;增强模型的泛化能力3.1 高质量数据的获取3.2 数据多样性的重…

#1 深度优先搜索

深搜思想 DFS其实是针对图论的一种搜索算法&#xff0c;由一个节点出发&#xff0c;不撞南墙不回头式的遍历所有的节点。 如先遍历1&#xff0c;沿&#xff08;1,2&#xff09;遍历2&#xff0c;再沿&#xff08;2,4&#xff09;遍历4&#xff0c;撞南墙&#xff08;边界条件…

XSS另类攻击(四)kali系统beef-xss安装和使用

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、环境说明 kali系统&#xff0c;ip&#xff1a;192.1…

k8s的ci/cd实践之旅

书接上回k8s集群搭建完毕&#xff0c;来使用它强大的扩缩容能力帮我们进行应用的持续集成和持续部署&#xff0c;整体的机器规划如下&#xff1a; 1.192.168.8.156 搭建gitlab私服 docker pull gitlab/gitlab-ce:latest docker run --detach --hostname 192.168.8.156 --publ…

SAP 生产订单批量报工(代码分享)

最近公司一直在对成本这块的业务进行梳理,影响比较大的就是生产这块的报工,经常会要求要批量的冲销报工,然后在继续报工,来调整生产订单的实际工时,前面的博客中已经给大家分享了批量冲销生产订单的代码, 下面给大家分享一下生产订单批量报工的代码 首先流程制造和离散制…

推荐几首听无数遍也听不腻的好歌(1)

1.Wannabe (Spice Girls Cover) 这首歌是Why Mona创作的首红眼特效的歌&#xff0c;唱的像牙痛的唱不清楚&#xff0c;但配上超级劲爆的旋律及节奏&#xff0c;简直好听到爆 2.Down For Life (Reset) 这首HSHK创作的纯音乐&#xff0c;虽然旋律一直重复一个调&#xff0c;但…

【算法】过桥

✨题目链接&#xff1a; 过桥 ✨题目描述 ✨输入描述: 第一行一个数n(2≤n≤2000) 接下来一行n个数a[i](1≤|a[i]|≤2000)表示浮块上的数字 ✨输出描述: 输出一行&#xff0c;表示对应的答案 ✨示例1 &#x1f4cd;输入 4 2 2 -1 2 &#x1f4cd;输出 2 &#x1f4cd;说明 1…

前端经典手写面试题---节流防抖

防抖 定义: n 秒后在执行该事件&#xff0c;若在 n 秒内被重复触发&#xff0c;则重新计时。 场景: 搜索框搜索输入。只需用户最后一次输入完&#xff0c;再发送请求手机号、邮箱验证输入检测窗口大小resize。只需窗口调整完成后&#xff0c;计算窗口大小。防止重复渲染。 实…

HNCTF 2024 ez_pecp 冰蝎+CS流量分析

考点:冰蝎webshell流量分析CS4.x流量解密 给了两个 流量包 第一个 ctf1.pcapng 查看其HTTP请求 而在CS中流量特征是基于tls协议 http-beacon 通信中&#xff0c;默认使用 GET 方法向 /dpixel 、/__utm.gif 、/pixel.gif 等地址发起请求&#xff0c;而且下发指令的时候会请求 …

如何使用浔川AI翻译机?——浔川AI社

1 前言 对于“如何使用浔川AI翻译机&#xff1f;”这个问题&#xff0c;我们官方 总结出以下结论&#xff1a; 首先&#xff1a; 复制以下代码&#xff1a; # -*- coding: utf-8 -*- import tkinter as tk import tkinter.messagebox import pickle import random# 窗口 wi…

Springboot校验集合是否为空,校验集合内对象参数

一、示例1 public AjaxResult saveQuoted(RequestBody NotEmpty List< Valid HisParam> list) {}二、示例2 public class Comment {NotNull(message "orderId 不能为空")private Long orderId;ValidNotEmpty(message "itemList不能为空")private…