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?
Advertisement
Answer
Add the prop disableEnforceFocus to the Dialog component.
Reference: issues/10341
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> ); } }