MUI, ReactSuite: Uncaught RangeError: Maximum call stack size exceeded - reactjs

Question

I'm using Modal component from React Suite and Select component from MUI
Basically I have an open button that opens a modal popup which has inside, a select component
However, when I open console, it produces the following error when I open the modal and select something from the Select menu:
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)
I have not edited anything except just copying and pasting the sample code from both the Modal and Select components(pasting it inside the <Modal.Body>) from React Suite and MUI respectively, any idea what's causing the error?
Thanks in advance
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

Not better way to solve this, but set this attribute disableEnforceFocus in your Modal tag.