打开Material UI模态框时如何让内部TextField自动保持聚焦

模态框打开后TextField稳定聚焦的实现方法 #

失焦问题本质是MUI Modal组件自带的焦点管理逻辑默认会把初始焦点放在Modal根容器上，同级渲染的permanent模式Drawer作为常驻可交互节点，也会和Modal的焦点捕获逻辑产生优先级冲突，以下两个方案都可以稳定实现聚焦：

• 方案1（官方推荐，最稳定）：使用Modal原生支持的initialFocusRef属性指定初始聚焦元素
  这个是MUI v5+版本专门为初始聚焦场景提供的属性，Modal完成渲染和焦点陷阱初始化后会自动把焦点定位到传入的元素上，不会被默认逻辑覆盖，代码示例：

  import { useRef } from 'react';
  // 在NewOrgModal组件内部定义输入框ref
  const orgNameInputRef = useRef(null);
  
  // Modal组件绑定initialFocusRef
  <Modal
    sx={{ position: 'absolute', top: '33%', left: '33%' }}
    open={open}
    onClose={handleClose}
    initialFocusRef={orgNameInputRef}
  >
    <Card {/* 原有Card属性不变 */}>
      <Typography {/* 原有Typography属性不变 */}>
        Create Org
      </Typography>
      <TextField
        // 注意MUI TextField要绑定原生input元素的ref需要用inputRef属性，不要直接用ref
        inputRef={orgNameInputRef}
        onKeyDown={(e) => (e.key === 'Enter' ? createOrg() : null)}
        id='orgName'
        onChange={(e) => setOrgName(e.target.value)}
        value={orgName}
        sx={{
          width: 300,
          input: { textAlign: 'center', padding: 1, fontSize: 20 },
        }}
        placeholder='My Awesome Org 🙂'
      />
      {/* 其余Button组件保持原有代码不变 */}
    </Card>
  </Modal>
  

• 方案2（兼容低版本MUI）：监听Modal打开状态手动触发聚焦
  如果使用的MUI版本不支持initialFocusRef，可以通过监听open状态，在Modal渲染完成后手动调用focus方法：

  import { useRef, useEffect } from 'react';
  const orgNameInputRef = useRef(null);
  
  useEffect(() => {
    if (open && orgNameInputRef.current) {
      // 加0ms延时等Modal焦点逻辑初始化完成，避免被覆盖
      setTimeout(() => orgNameInputRef.current.focus(), 0);
    }
  }, [open]);
  
  // 其余代码和方案1一致，TextField绑定inputRef即可
  

强制TextField持续聚焦的负面影响 #

绝对不要用onBlur={() => inputRef.current.focus()}这类逻辑强制输入框持续持有焦点，负面影响非常明确：

• 直接破坏基础交互：后续模态框内新增其他输入框、按钮、下拉选择等可交互组件时，用户点击其他组件会被强制拉回该输入框，完全无法操作其他元素。
• 破坏无障碍能力：MUI Modal自带的焦点陷阱本来是支持键盘用户通过Tab键在模态框内循环切换焦点、屏幕阅读器识别当前操作区域，强制锁焦点会直接废掉这部分能力，不符合可访问性规范。
• 易引发恶性bug：如果后续其他输入框也加了类似的强制聚焦逻辑，会出现焦点来回跳转的死循环，极端情况会导致页面卡死。

正确的聚焦逻辑只需要在模态框打开时触发一次默认聚焦即可，后续焦点完全交给用户自由控制。如果后续模态框内新增多个输入框，只需要把initialFocusRef调整为想要默认聚焦的第一个元素就行，不需要额外写强制聚焦逻辑。

内容的提问来源于stack exchange，提问作者help for me