Material-UI-Next弹窗中CKEditor的MathJax插件输入框无法聚焦求助

我之前在项目里也遇到过一模一样的问题——Material-UI Next Dialog的焦点陷阱（focus trap）机制会把焦点牢牢锁在弹窗内部，导致MathJax弹出的输入框根本拿不到焦点。不用jQuery的话，这里有几个React专属的解决方案，亲测有效：

方案1：临时关闭Dialog的强制聚焦 #

Material-UI Dialog默认开启了enforceFocus属性，会强制焦点停留在Dialog内部元素上。我们可以通过disableEnforceFocus属性关闭这个机制，让焦点能自由切换到MathJax的输入框：

import Dialog from '@material-ui/core/Dialog';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Mathjax from '@ckeditor/ckeditor5-math/src/mathjax';

function MathEditorDialog({ open, onClose }) {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      disableEnforceFocus={true} // 关键配置：关闭强制聚焦
      maxWidth="md"
      fullWidth
    >
      <div style={{ padding: 24 }}>
        <CKEditor
          editor={ClassicEditor}
          config={{
            plugins: [Mathjax],
            toolbar: ['heading', 'bold', 'italic', 'mathjax'],
            mathjax: {
              // 你的MathJax配置，比如加载CDN地址
              library: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
            }
          }}
        />
      </div>
    </Dialog>
  );
}

优缺点：

• ✅ 实现最简单，几行代码就能解决问题
• ❌ 关闭了Dialog的可访问性（accessibility）特性，不符合WCAG标准，适合对无障碍要求不高的场景

方案2：动态控制焦点陷阱（兼顾可访问性） #

如果需要保留Dialog的无障碍特性，可以用MutationObserver监听MathJax弹窗的出现/消失，动态切换disableEnforceFocus的状态：

import { useState, useEffect } from 'react';
import Dialog from '@material-ui/core/Dialog';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Mathjax from '@ckeditor/ckeditor5-math/src/mathjax';

function MathEditorDialog({ open, onClose }) {
  const [disableFocusTrap, setDisableFocusTrap] = useState(false);

  useEffect(() => {
    // 监听body下的DOM变化，检测MathJax弹窗是否存在
    const observer = new MutationObserver(() => {
      // 替换成你项目中MathJax弹窗的实际选择器，比如CKEditor Math插件的弹窗类名是'ck-math-dialog'
      const mathjaxModal = document.querySelector('.ck-math-dialog');
      setDisableFocusTrap(!!mathjaxModal);
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });

    // 组件卸载时停止监听
    return () => observer.disconnect();
  }, []);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      disableEnforceFocus={disableFocusTrap} // 动态控制
      maxWidth="md"
      fullWidth
    >
      <div style={{ padding: 24 }}>
        <CKEditor
          editor={ClassicEditor}
          config={{
            plugins: [Mathjax],
            toolbar: ['heading', 'bold', 'italic', 'mathjax'],
            mathjax: {
              library: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
            }
          }}
        />
      </div>
    </Dialog>
  );
}

优缺点：

• ✅ 只有当MathJax弹窗出现时才关闭焦点陷阱，平时保留Dialog的无障碍特性
• ✅ 不需要修改CKEditor插件配置，兼容性好
• ❌ 需要准确找到MathJax弹窗的DOM选择器，不同版本的插件可能有变化

方案3：让MathJax弹窗挂载在Dialog内部（最优解） #

如果你的CKEditor MathJax插件支持配置弹窗的父元素，直接把弹窗挂载到Dialog内部的DOM节点上，这样它就属于Dialog的焦点陷阱范围，自然能获取焦点：

import { useRef } from 'react';
import Dialog from '@material-ui/core/Dialog';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Mathjax from '@ckeditor/ckeditor5-math/src/mathjax';

function MathEditorDialog({ open, onClose }) {
  const dialogContentRef = useRef(null);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
    >
      {/* 这个容器会作为MathJax弹窗的父元素 */}
      <div ref={dialogContentRef} style={{ padding: 24 }}>
        <CKEditor
          editor={ClassicEditor}
          config={{
            plugins: [Mathjax],
            toolbar: ['heading', 'bold', 'italic', 'mathjax'],
            mathjax: {
              library: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
              // 配置弹窗的父元素为Dialog内部的容器
              dialogParent: dialogContentRef.current
            }
          }}
        />
      </div>
    </Dialog>
  );
}

说明：不同的CKEditor Math插件配置项可能不同，比如有些插件用parentElement而不是dialogParent，可以查看插件的官方文档确认具体参数。

优缺点：

• ✅ 完全不影响Dialog的无障碍特性，符合最佳实践
• ✅ 从根源上解决焦点问题，最稳定可靠
• ❌ 依赖插件支持父元素配置，如果插件不支持就无法使用

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