Material UI多选组件TrapFocus栈溢出错误排查求助

我遇到了*Uncaught RangeError: Maximum call stack size exceeded.*错误，这是TrapFocus相关的栈溢出问题。尝试过设置disableEnforceFocus、disablePortal、enforceFocus={false}等props，但问题仍未解决。

我的依赖版本：

• "@material-ui/core": "^4.11.0"
• "@material-ui/pickers": "^3.2.10"

组件代码：

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function MultipleSelect(props) {
  const { options, filters, setFilters, id}= props  
  const [sourceId, setSourceId] = React.useState([]);

  const handleChange = (event) => {
    event.preventDefault(true);
    const {
        target: { value },
    } = event;

    setFilters({...filters, [id]: value});

    setSourceId(
      typeof value === 'string' ? value.split(',') : value,
    );
  };

  return (
      <FormControl sx={{ width: 250 }}>
        <Select
          multiple
          id={id}
          options={options}
          value={sourceId}
          onChange={handleChange}
          enforcefocus={false}
        >
          {options.map((option) => (
            <MenuItem
              key={option.id}
              value={option.id}
            >
              {option.name}
            </MenuItem>
          ))}
        </Select>
    </FormControl>
  );
}

错误信息：

TrapFocus.js:214 Uncaught RangeError: Maximum call stack size exceeded.
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at HTMLDocument.contain (Unstable_TrapFocus.js:84:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at contain (Unstable_TrapFocus.js:84:1)
    at Unstable_TrapFocus.js:116:1

修复方案 #

1. 修正Prop命名错误
   Material-UI的props采用驼峰命名法，你写的enforcefocus={false}是错误的，应该改为enforceFocus={false}。

2. 移除不必要的默认行为阻止
   event.preventDefault(true)会干扰Select组件内部的焦点管理逻辑，直接删除这行代码。

3. 同步状态与父组件Props
   当前组件维护了本地state sourceId，但父组件的filters才是数据源，容易出现不同步问题。直接从filters中获取值，无需本地state：

const sourceId = filters[id] ?? [];

4. 添加兼容Props
   结合版本兼容性问题，给Select组件添加disablePortal和disableEnforceFocus props，彻底禁用TrapFocus的强制焦点逻辑。

修改后的完整代码 #

import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function MultipleSelect(props) {
  const { options, filters, setFilters, id}= props  
  // 直接从父组件props获取值，无需本地state
  const sourceId = filters[id] ?? [];

  const handleChange = (event) => {
    const { target: { value } } = event;

    setFilters({...filters, [id]: value});
  };

  return (
      <FormControl sx={{ width: 250 }}>
        <Select
          multiple
          id={id}
          value={sourceId}
          onChange={handleChange}
          enforceFocus={false}
          disablePortal
          disableEnforceFocus
        >
          {options.map((option) => (
            <MenuItem
              key={option.id}
              value={option.id}
            >
              {option.name}
            </MenuItem>
          ))}
        </Select>
    </FormControl>
  );
}

5. 版本兼容性检查
   如果上述方案无效，建议升级@material-ui/pickers到适配@material-ui/core 4.x的最新版本（比如3.3.10），或者检查项目中是否存在多个版本的Material-UI依赖导致冲突。

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