[错误]:在 fluent-dropdown 中进行 SSR 水合时，占位符布局发生偏移
作者: radium-v创建于 2026年9月7日更新于 2026年9月15日
标签Type: Bug :bug:Component: Dropdownweb-componentsArea: SSRFluent UI WC (v3)
错误报告
在自定义元素升级之前,由服务器提供的“流出-滴入”和“位置持有人”使控制空出。 水化会插入控制按钮和占位符文本,导致明显的布局变化.
□ repro 或代码样本
- 服务器使用软件包的SSR管道提供降水。
- 推迟客户方组成部分的定义。
- 比较水合之前和之后的下降情况。
时间轴 : <流出- 滴出占位符="选择一个水果" > <流利列表框> <流-可选值="apple"> 苹果 </流利-选项 > <流-可选值="香蕉" > Banana </流-可选用 > </流利的列表框> </流放-滴放>
(简体中文)
在定义加载前,控件没有占位符. 一旦组件升级,占位符和默认的控制样式就会出现并改变其界限.
<img 宽="160"高="34" alt="Image" src="https://GitHub.com/user-attachments/assets/fcce39e2-3efb-400c-9444-c46e892866d6"/".
□ 预期行为
服务器下放应显示其占位符,其尺寸和样式与水合控制相同。 出水不应产生布局转变或明显变化.
<img宽="160"高="34" alt="Image" src="https://GitHub.com/user-attachments/assets/792c0294-ee24-4434-a6eb-b007bd720ce2"/".
□ 当前的行为
安全部门改革控制槽没有回放内容。 内部按钮是在组件初始化期间创建的,因此在元素未定义时,占位符仍然缺失.
水分插入按钮和占位符文本并应用默认大纲样式。 水分前和水分后截图和边框不同,Chrimium记录了一个没有最近用户输入的布局相变事件.
□ 可能的解决方案
将“aria-hidden”占位符作为控制槽中倒置的内容,然后将其样式与生成的控制相匹配。 预定义 CSS 还应代表默认的占位符颜色和外观外观.
我有一个本地的固定,可以提交。
□ 内容
这影响了服务器发送的推迟或流出客户端JavaScript的应用程序. 用户看到水合完成后会出现空降变化大小或外观,这有利于累积布局的转变.
□你的环境
* OS & 设备: macOS on Mac
* 浏览器: Chromium
* 版本:QQFluentui/web组件@3.1.2'内容来源: microsoft/fluentui