react-draft-wysiwyg的onBlur事件无法传播至MUI按钮问题求解

react-draft-wysiwyg 内部默认在mousedown事件阶段执行了preventDefault()，用来维持编辑器内部的文本选区、焦点状态，该逻辑会直接打断浏览器默认的焦点转移流程：点击外部MUI按钮时，编辑器虽然可以正常触发onBlur回调，但原生事件传播链已经被截断，点击事件无法正常传递到目标按钮上，通常还会伴随按钮需点击两次才生效、首次点击无响应的连带问题。

• 方案1：给关联MUI按钮添加onMouseDown事件拦截，跳过编辑器的焦点抢占
  这是改造成本最低的方案，针对所有和编辑器同页面、位于编辑器域外的MUI操作按钮，添加如下事件处理即可：

  <Button
    onMouseDown={(e) => e.preventDefault()}
    onClick={yourActualBusinessLogic}
  >
    提交
  </Button>
  

  核心原理是在鼠标按下阶段提前阻止默认行为，避免编辑器的失焦逻辑抢占事件流，保证点击动作可以正常落到按钮上。
• 方案2：调整编辑器失焦逻辑的执行时机，避免同步阻塞事件流
  如果项目中在onBlur回调里写了同步的状态更新、焦点重置逻辑，将这部分逻辑放到宏任务中延迟执行，等按钮的点击事件完成传播后再运行失焦相关逻辑：

  const handleEditorBlur = () => {
    // 禁止在此处直接同步执行状态更新、DOM焦点操作
    setTimeout(() => {
      // 失焦后的校验、状态同步、数据保存等逻辑全部移到这里
      setEditorFocusState(false)
    }, 0)
  }
  

  如果使用的是可控模式管理editorState，可以给Editor组件传入blurOnBlur={false}属性，关闭组件默认的强制焦点管理逻辑。
• 方案3：逐层排查事件冒泡拦截逻辑
  沿编辑器到目标按钮的DOM树逐层检查，确认没有中间层绑定了e.stopPropagation()、e.preventDefault()类的事件拦截逻辑，排查时可以在按钮的mousedown、click、mouseup阶段分别打日志，定位事件被截断的具体节点。

• 不要在编辑器的onBlur回调中直接执行DOM焦点操作（比如主动调用其他元素的focus()方法），这类操作会直接中断当前正在传播的点击事件
• MUI v5+版本的Button组件的disableRipple、disableFocusRipple属性不会影响事件传播，无需在这类属性上浪费排查时间
• 如果异常出现在react-draft-wysiwyg自带的内置工具栏按钮上，优先将组件升级到1.15.0及以上版本，旧版本内置工具栏本身存在事件冒泡的已知bug

内容的提问来源于stack exchange，提问作者Oded