[React] FloatingFocusManager 即使 returnFocus 为 false，也会将 fallback span 插入 contenteditable 中
作者: vanilla-wave创建于 2026年9月8日更新于 2026年9月8日
** 描述错误**
`FloatingFocusManager'在DOM参考文献后立即插入一个空的、可视化隐藏的回放焦点。 如果这一提法是 " 内容可编 " 根的后人,则背书就成为可编辑文件的一部分。
这一点也发生在返航焦点'、初始焦点'--1'、模式'-false'、守护者'-false'和飞入门户'上的保留TabOrder'-false'。
在由schema管理的编辑器中,这个额外的孩子可以触发 DOM 调节,替换引用子树并短暂地将代码/注/表工具栏移动到视图源. 复制时故意只使用React和Floating UI,有本土的Mutation Observator来显示出乎意料的孩子插入;它不包括编辑库或模拟编辑器的调节.
** 废除**
密码箱:https://codesandbox.io/p/sandbox/nhgj97
复制行为的步骤 :
- 打开预览以 QQ-floating-ui/ [email protected] `(确认 " 是,如果 CodeSandbox 要求,继续预览 " )。
- 观察`不可预料的可编辑儿童插入:0'。
- 在可编辑的代码块内选择文本(点击也打开菜单).
- 浮动菜单在编辑器外打开门户。 计数器变为 " 1 " ,输出显示可编辑根中的这个新孩子:
时间轴 : < span tabindex="-1" aria-hidden="真"样式="." 视觉隐藏样式"###/span >
观察员只读;只报告增加内容。 应用程序没有插入此跨度 。
** 预期行为**
打开一个可编辑文档内内容的门户浮动菜单,不应在该文件中插入回放焦点。 特别是,使返回焦点失效应该能够避免这种额外的子插入,或者应该有一个支持的方法,在保留正常的菜单焦点行为的同时,将倒置置于可编辑根外.
** 枪声**
复制会显示精确的被插入元素和一个突变计数器,因此不需要截图来观察问题.
** 内容:**
- 操作系统: macOS 26.3.1
- 浏览器:Google Chrome 152.0.7977.76 (中文(简体) ).
- 版本: *`@-ui/ react' 0.27.20; react / react DOM 18.2.0
- 0.27.19中也有同样的插入。
** 其他情况**
在“焦点管理器”中插入:
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么?
倒转 El = doc.create Element('span') ;
fallback El.set 属性('tabindex','-1');
倒置 El. set 属性('aria-hidden','reuth');
对象. address (fall backEl. style, HIDDEN STYLES) ;
如果(是内端门户 ) {
domReference. 插入相邻元素('Adjacent Element ('Afterend', fallbackEl;) ;
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?本地工作是把这个倒数放在可编辑根后,而不是放在孩子参考后。 普通的参考文献在内容可编程之外保留他们现有的行为.
我检查了现有的报告:
3202描述了一个相关的ProseMirror调节问题,但涉及
数据浮动-ui-inert'/aria-hidden'属性。 " 获取侧面元素 " 无法控制
. . . . . . .
内容来源: floating-ui/floating-ui