MUI、ReactSuite：未捕获范围错误：超出最大调用堆栈大小

Question

我正在使用 React Suite 中的 Modal 组件和 MUI 中的 Select 组件

基本上我有一个打开按钮，可以打开一个模式弹出窗口，其中有一个选择组件

但是，当我打开控制台时，当我打开模式并从“选择”菜单中选择某些内容时，它会产生以下错误：

    at HTMLDocument.contain (TrapFocus.js:214:1)
    at Object.current (Modal.js:131:1)
    at useEventCallback.js:19:1
    at Object.current (Modal.js:139:1)
    at HTMLDocument.<anonymous> (useEventCallback.js:19:1)
    at HTMLDocument.contain (TrapFocus.js:214:1)
    at Object.current (Modal.js:131:1)
    at useEventCallback.js:19:1
    at Object.current (Modal.js:139:1)
    at HTMLDocument.<anonymous> (useEventCallback.js:19:1)

除了分别从 React Suite 和 MUI 复制并粘贴来自 Modal 和 Select 组件的示例代码（将其粘贴到 内）之外，我没有编辑任何内容，知道是什么导致了错误吗？

提前致谢

import React from "react";
import { Button, Modal, Toggle, ButtonToolbar } from "rsuite";

import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder",
];

function Box() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setPersonName(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div className="modal-container">
      <ButtonToolbar>
        <Button onClick={handleOpen}>Open</Button>
      </ButtonToolbar>

      <Modal open={open} onClose={handleClose}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div>
            <FormControl sx={{ m: 1, width: 300 }}>
              <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
              <Select
                labelId="demo-multiple-checkbox-label"
                id="demo-multiple-checkbox"
                multiple
                value={personName}
                onChange={handleChange}
                input={<OutlinedInput label="Tag" />}
                renderValue={(selected) => selected.join(", ")}
                MenuProps={MenuProps}
              >
                {names.map((name) => (
                  <MenuItem key={name} value={name}>
                    <Checkbox checked={personName.indexOf(name) > -1} />
                    <ListItemText primary={name} />
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose} appearance="primary">
            Ok
          </Button>
          <Button onClick={handleClose} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default Box;

Answer 1

这不是解决此问题的更好方法，而是在 Modal 标记中设置此属性 disableEnforceFocus。

Answer 2

禁用模式上的焦点陷阱对我来说是一个很大的妥协，下一个最好的“黑客”是使组件的弹出框成为模式的子项，通过

disablePortal

：

<Select ...{} MenuProps={{ disablePortal: true }}  />