Material-UI: Uncaught RangeError: Maximum call stack size exceeded

Question

I'm using the Dialog and Select components from Material-UI and React.

Just an example:

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>
    );
  }

}

After clicking on the select, i'm getting this error from Modal.js:

"Uncaught RangeError: Maximum call stack size exceeded. at HTMLDocument.Modal._this.enforceFocus (Modal.js?86a5:197)"

Any ideas?

Answer 1

Add the prop disableEnforceFocus to the Dialog component.

Reference: issues/10341

UPDATE 03/2023:

from the docs:

Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

Maybe need to add disablePortal as suggested here

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>
    );
  }

}