[Bug] Modal/Dialog Uncaught RangeError: Maximum call stack size exceeded.

[marcoturi]

When using a Select inside a Dialog i get the error "Uncaught RangeError: Maximum call stack size exceeded." after clicking into the select box.
The error came from here.
Note: I'm using redux-form with redux-form-material-ui, but I don't think that they are related, expected for the fact that redux-form-material-ui is using beta 16 of material-ui for the Select component

• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

To not throw errors

Current Behavior

Errors in console

Steps to Reproduce (for bugs)

Your Environment

Tech	Version
Material-UI	1.0.0-beta.17
React	15.6.1
redux-form-material-ui	5.0.0-beta1
browser	Chrome 61

[oliviertassinari]

Your issue has been closed because it does not conform to our issue requirements.
Please provide a reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

happens when you use the Select component inside an Dialog component in an external library (i.e. in node modules).

It could be linked to a focus loop issue.

[oliviertassinari]

Guys, please provide a reproduction on codesandbox.io. We have too many issues to handle to spend time, trying to reproduce issues. Thank you :).

[jpmn]

We investigated the problem and it was a conflict between the multiple inputs sharing the same FormControl context. When one of them would become dirty, the other one would also trigger a change in the state and this created an infinite loop. We had to override the behavior of the muiFormControl context (similar to Input) in order to fix this problem (checkDirty, componentWillUpdate, isControlled, getChildContext).

[alphaeadevelopment]

Is it possible to reopen this issue?
I have created a sandbox illustrating it: https://codesandbox.io/s/r4xnw0p31m

[marcoturi]

@oliviertassinari I agree with @alphaeadevelopment this issue should be opened.

[alphaeadevelopment]

Thanks @DarkKnight1992.

Sandbox updated here: https://codesandbox.io/s/2x00kvkopy

[oliviertassinari]

@alphaeadevelopment Do I need to use a specific browser? I can't reproduce the problem. Also, the codesandbox is using a third party library and an old version of Material-UI (2-3-month-old). I'm closing for now.

[alphaeadevelopment]

I assume you weren't looking at https://codesandbox.io/s/2x00kvkopy, where I'd implemented the workaround suggested by @DarkKnight1992?

Looking at https://codesandbox.io/s/r4xnw0p31m, I get the issue in both chrome and safari.

I've updated the version of material ui to the latest (1.0.0-beta.43) and the issue is still there.

The third party library is there precisely because the bug only manifests when including a component from node_modules. It doesn't happen with the component is inline. See https://codesandbox.io/s/y05yk3k3pv and try switching in ModalForm.jsx between the local file InlineForm.jsx and the library component test-materialui-modal-form-bug - the source is just copy/pasted from that library into the InlineForm component.

You have to open the sandbox in a separate tab, it doesn't happen in the embedded sandbox viewer.

The bug appears when you open up the dropdown:

Chrome:

Safari:

[oliviertassinari]

the bug only manifests when including a component from node_modules.

@alphaeadevelopment It's the tips of the iceberg. It happens when you are trying two nest two Modal with a different ModalManager instance. Both modals think they are the top level one, and try to restore the focus position on the right DOM node.
https://github.com/mui-org/material-ui/blob/b74a67516881bf75b18befb57d75070603c12712/packages/material-ui/src/Modal/Modal.js#L406
(your third party package is bundling the components twice)

where I'd implemented the workaround

Using disableEnforceFocus is an option to address the problem. But I would rather encourage you not to bundle Material-UI in your third party component or to inject a custom instance of the ModalManager.

[foodforarabbit]

@oliviertassinari I'm running into this problem as well, the problem is we have a "component library" that includes components that connect redux-form Field to material-ui input components. One of the components we're using is material-ui-picker's DatePicker, which causes the issue above.

How would you inject a custom instance of ModalManager? I actually injected it into Modal.Naked.defaultProps.manager but then I found out that Naked (in withStyles) is only available in non-production environments. My last resort is to add disableEnforceFocus for every modal that contains the datepicker, but my concern is that I would rather have a solution that will "fix" the issue so that future developers working with my code / library won't run into this issue again.

Any tips? Would it be too much to ask to allow Naked to be exposed for development environments as well? :)

[oliviertassinari]

@foodforarabbit The problem you are describing is hiding something else. It would be good to get to the bottom of it. Still, if you are looking for a quick workaround, you might be able to inject the modal manager in the theme.props.MuiModal.manager key.

Would it be too much to ask to allow Naked to be exposed for development environments as well?

No way! We are exposing Naked as a hack for testing purposes.

[foodforarabbit]

@oliviertassinari ok thanks for the reply! I didn't realize you could override defaults with the theme, really appreciate the tip!

[foodforarabbit]

Hmm ok I tried the theme thing out... got the error:

Modal.js:130 Uncaught TypeError: _this.props.manager.add is not a function

I checked the object in the debugger, it has the same properties as a ModalManager instance e.g.

containers : []
data : []
handleContainerOverflow : true
hideSiblingNodes : true
modals : []

but all the functions are missing and it is just a plain object. Anyway I'm going to go back to the previous solution with the disableEnforceFocus it seems to be the easiest way forward at the moment. Thanks!

[oliviertassinari]

Hmm ok I tried the theme thing out... got the error:

@foodforarabbit Yeah, we need to fix #12031.

[kodeschooler]

We are in the process of migrating our app to mui and this error is now happening in a dialog on top of another dialog. Every time the second pop up is closed the stack error is produced and can be seen in the browser console. The error is thrown from Unstable_TrapFocus.js.

I made an example on code sandbox and installed the same material ui libraries and versions we are running. Here is the error reproduced: https://codesandbox.io/s/wild-frost-lno47

Just click the + button and then click save/close on the second popup and view the browser console: you'll see a bunch of errors Uncaught RangeError: Maximum call stack size exceeded.

Any help on getting rid of this is much appreciated!

[kodeschooler]

@alphaeadevelopment Do I need to use a specific browser? I can't reproduce the problem. Also, the codesandbox is using a third party library and an old version of Material-UI (2-3-month-old). I'm closing for now.

I thought we could migrate to mui gradually, what's wrong with running previous versions and mui at the same time?

[farshid1]

@kodeschooler were you able to figure out the issue by any chance? I'm getting the same error coming from Unstable_TrapFocus.js but in my case I have a select input (which is built with MUI v5) in a modal (which is built with MUI v4). Selecting/Unselecting an item throws the error.

[CalvinJamesHeath]

I'm experiencing the same issue. I employ two MUI dialogs that are overlaid. When I refresh the page from the second opened dialog, everything continues to function well, but if I don't utilize the disableEnforceFocus prop, an infinite loop with a TrapFocus Error is formed. And if I do use the disableEnforceFocus propertie, the issue occurs in that the styles applied from the dialog to the body: "overflow:hidden" don't erase once I shut them. I am unable to scroll as a result, even after closing both MUI dialogs.

[pinguluk]

For me it was caused due a misconfiguration in webpack, that caused the Modal to be rendered twice #24641 (comment)