Material-UI：未捕获范围错误：超出最大调用堆栈大小

Question

我正在使用 Material-UI 和 React 中的对话框和选择组件。

举个例子：

import React from 'react';
import { Dialog, MenuItem, Select } from '@material-ui/core';

class SomeComponent extends React.PureComponent {

  render() {
    return (
      <Dialog>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
        </Select>
      </Dialog>
    );
  }

}

单击选择后，我从 Modal.js 收到此错误：

“未捕获范围错误：超出最大调用堆栈大小。at HTMLDocument.Modal._this.enforceFocus (Modal.js?86a5:197)"

有什么想法吗？

Answer 1

将属性 disableEnforceFocus 添加到 Dialog 组件。

参考：issues/10341

更新 03/2023：

来自文档：

一般来说，这不应该设置为 true，因为它会使模态更少 可使用辅助技术，例如屏幕阅读器。

也许需要按照建议添加

disablePortal

这里

import React from 'react';
import { Dialog, MenuItem, Select } from '@material-ui/core';

class SomeComponent extends React.PureComponent {

  render() {
    return (
      <Dialog
        disableEnforceFocus
      >
        <Select
          value={this.state.age}
          onChange={this.handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
        </Select>
      </Dialog>
    );
  }

}

Answer 2

在 mui v4 中，您可以使用

disableEnforceFocus

检查 docs

Answer 3

禁用模式上的焦点陷阱对我来说是一个很大的妥协，因为它会导致可访问性问题并允许用户专注于模式背后的元素。

下一个最好的“黑客”是通过

disablePortal

:

使组件的弹出窗口成为模式的子项

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

如果是

DatePicker

：

<DatePicker
  slotProps={{
    popper: { disablePortal: true }, // for desktop views
    dialog: { disablePortal: true }  // for mobile views
  }}
/>