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

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样式是无效的
在这里插入图片描述

相关文章:

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

右上角x按钮聚焦效果展示 第一次点击不会聚焦&#xff0c;第二次或多次点击会出现这种情况。如果多个地方公用一个页面里&#xff0c;这个页面包含这个组件&#xff0c;那其它页面刚打开弹框就是聚焦状态&#xff0c;是个样式的问题。 解决&#xff1a; import * as React fr…...

【SAP HANA 33】前端参数多选情况下HANA如何使用IN来匹配?

场面描述: 在操作界面经常会出现某个文本框需要多选的情况,然后后台需要根据多选的值进行匹配搜索。 一般处理的情况是: 1、在Java后端动态生成SQL 2、不改变动态SQL的情况,直接当做一个正常的参数进行传递 本次方案是第二个,直接当做一个正常的字符串参数进行传递即…...

Go 语言中常量和变量的定义、使用

Go 语言&#xff0c;作为一种现代编程语言&#xff0c;以其简洁性和高效性赢得了开发者的青睐。在 Go 语言中&#xff0c;常量与变量作为存储和操作数据的基本元素&#xff0c;扮演着至关重要的角色。通过正确理解和使用常量与变量&#xff0c;开发者可以编写出更加健壮和高效的…...

活动预告|6月13日Apache Flink Meetup·香港站

6 月 13 日 | 香港 | 线下 Apache Flink Meetup 的风吹到了香江之畔&#xff0c;Apache Flink 香港 Meetup 来啦&#xff01;本次活动&#xff0c;我们邀请了来自阿里云的顶尖专家&#xff0c;帮助开发者全面了解 Apache Flink 的流批一体的数据处理能力&#xff0c;流式数据湖…...

算法(七)插入排序

文章目录 插入排序简介代码实现 插入排序简介 插入排序&#xff08;insertion sort)是从第一个元素开始&#xff0c;该元素就认为已经被排序过了。然后取出下一个元素&#xff0c;从该元素的前一个索引下标开始往前扫描&#xff0c;比该值大的元素往后移动。直到遇到比它小的元…...

抖音太可怕了,我卸载了

这两天刷短视频&#xff0c;上瘾了&#xff0c;太可怕了。 自己最近一直在研究短视频制作&#xff0c;所以下载了抖音&#xff0c;说实话&#xff0c;我之前手机上并没有抖音&#xff0c;一直在用B站。 用了两天抖音&#xff0c;我发现&#xff0c;这玩意比刷B站还容易上瘾啊…...

AI大模型在测试中的深度应用与实践案例

文章目录 1. 示例项目背景2. 环境准备3. 代码实现3.1. 自动生成测试用例3.2. 自动化测试脚本3.3. 性能测试3.4. 结果分析 4. 进一步深入4.1. 集成CI/CD管道4.1.1 Jenkins示例 4.2. 详细的负载测试和性能监控4.2.1 Locust示例 4.3. 测试结果分析与报告 5. 进一步集成和优化5.1. …...

OOP一元多项式类(运算符重载)

题目描述 一元多项式按照升幂表示为: Pn(x) = p0+ p1x + p2x2+ … +pnxn。(n>=0) 构建一元多项式类保存多项式中每项的系数和指数。并重载输入输出运算符,完成多项式的输入以及输出;重载加法,减法,乘法运算符,完成多项式的运算。 输入 测试数据数 对于每组测试数…...

Docker compose 的方式一键部署夜莺

官方安装文档&#xff1a;https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v7/install/docker-compose/ 介绍&#xff1a;夜莺监控是一款开源云原生观测分析工具&#xff0c;采用 All-in-One 的设计理念&#xff0c;集数据采集、可视化、监控告警、数据分析…...

解锁私域流量的奥秘:构建独特的私域生态

大家好&#xff0c;我是来自一家深耕私域电商领域的技术创新公司&#xff0c;担任资深产品经理一职&#xff0c;已积累了多年的行业经验和独到见解。今天&#xff0c;我想和大家共同探讨私域流量的核心内涵&#xff0c;以及它为何在当前的商业环境中变得如此重要。在私域运营中…...

在CentOS系统上安装Oracle JDK(华为镜像)

在CentOS系统上安装Oracle JDK(华为镜像) 先爱上自己&#xff0c;再遇见爱情&#xff0c;不庸人自扰&#xff0c;不沉溺过去&#xff0c;不为自己的敏感而患得患失&#xff0c;不为别人的过失而任性&#xff0c;这才是终身浪漫的开始。 https://repo.huaweicloud.com/java/jdk …...

7 步解决Android Studio模拟器切换中文输入

详细步骤传送地址&#xff1a;Android Studio 模拟器切换中文输入 目录 01 问题概述 02 模拟器的调试 01 问题概述 大家在使用Android Studio 软件进行项目演示时总会遇到一些输入框需要输入中文汉字的情况&#xff0c;由于AS自带的模拟器基本都是英文&#xff0c;这时就有同…...

如何搭建B2B2C商城系统?开发语言、功能扩展、优势分析

如今&#xff0c;越来越多的企业意识到单靠第三方电商平台不足以快速实现品牌曝光和销售增加&#xff0c;相反还有诸多限制。 因此&#xff0c;搭建一个B2B2C商城也就成为企业发展业务的首选&#xff0c;既可以满足自营和商家入驻的需求&#xff0c;功能操作又灵活&#xff0c…...

Rust的高效易用日志库—tklog

很多人习惯于python&#xff0c;go等语言基础工具库的简单易用&#xff1b;在使用rust时&#xff0c;可能感觉比较麻烦&#xff0c;类似日志库这样的基础性工具库。tklog提供用法上&#xff0c;非常类似python等Logger的日志库用法&#xff0c;用法简洁&#xff1b;基于rust的高…...

LabVIEW调用外部DLL(动态链接库)

LabVIEW调用外部DLL&#xff08;动态链接库&#xff09; LabVIEW调用外部DLL&#xff08;动态链接库&#xff09;可以扩展其功能&#xff0c;使用外部库实现复杂计算、硬件控制等任务。通过调用节点&#xff08;Call Library Function Node&#xff09;配置DLL路径、函数名称和…...

Python图形界面(GUI)Tkinter笔记(十六):Radiobutton选项功能按钮(单选按钮)

在tkinter库中,选项功能按钮Radiobutton是一个常用的控件,用于从多个选项中选择一个,从而实现相关的交互功能。 其余笔记:【Python图形界面(GUI)Tkinter笔记(总目录)】 【一】书写:tkinter.Radiobutton(父窗口对象,参数1,参数2,...) 【二】Radiobutton控件常用参数…...

静态路由原理与配置

文章目录 路由器的工作原理路由根据路由表转发数据 路由表的形成路由表路由表的形成 静态路由和默认路由静态路由默认路由 路由器转发数据包的封装过程源目地址变化 交换与路由对比路由工作在网络层交换工作在数据链路层 静态路由和默认路由的配置 路由器的工作原理 路由 路由…...

Android 开机动画的启动过程BootAnimation(基于Android10.0.0-r41)

文章目录 Android 开机动画的启动过程BootAnimation(基于Android10.0.0-r41)1.开机动画的启动过程概述2.为什么设置了属性之后就会播放&#xff1f; Android 开机动画的启动过程BootAnimation(基于Android10.0.0-r41) 1.开机动画的启动过程概述 下面就是BootAnimation的重要部…...

Redis 中的 Zset 数据结构详解

目录 用法 1. 增 2. 删 3. 查 4. 交&#xff0c;并 编码方式 应用场景 Redis 中的 Zset&#xff08;有序集合&#xff09;是一种将元素按照分数进行排序的数据结构。与上篇写的SetRedis 中的 Set 数据结构详解不同&#xff0c;Zset 中的每个元素都关联一个浮点数类型的…...

Python网页处理与爬虫实战:使用Requests库进行网页数据抓取

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...