Max call stack - Modal._this.enforceFocus

[samdenty]

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

Expected Behavior

Doesn't exceed the call stack

Current Behavior

Maximum call stack size exceeded

Steps to Reproduce (for bugs)

I can't fully reproduce this issue, as it seems it's an edge case - but this was the environment in which it occurred

1. Add a component to the page which keeps itself in focus (monaco editor in this case)
2. Open up a new modal
3. Max call stack exceeded

Your Environment

Tech	Version
Material-UI	beta.34
React	16.2.0

[oliviertassinari]

Add a component to the page which keeps itself in focus

@samdenty99 The modal also keeps itself in focus. The maximum call stack error is the expected behavior. You have an infinite focus loop.
Ideally, the modal component should be able to detect the loop and raised an extra warning along suggesting people to diable the behavior with disableEnforceFocus.

Given it's the first time the problem is raised. Let's use this issue as documentation for future people facing it.

[albinekb]

I got this error when using a Popover inside my Dialog with focus on an Input, i found this issue by google and solved it by adding disableEnforceFocus when the input was focused and the Popover is visible, I think this issue is enough 👍

[nbkhope]

Got the same problem as @albinekb with a Popover (Select) inside a Modal. Why is this error normal behavior?

[EsaNuurtamo]

I get this error when I open Dialog from Menu-component. If I open my Dialog by clicking Button I don't get the error.

[Alexandr-Ilyin]

Also facing the issue when opening dialog from menu

[oakis]

disableEnforceFocus inside Dialog solved this issue for me.

[aaadryyy]

O thou traveler for whom disableEnforceFocus doesn't work, thou may try using disablePortal on thou Modal's Popover.

[jameswlale]

O thou traveler for whom disableEnforceFocus doesn't work, thou may try using disablePortal on thou Modal's Popover.

cheers @aaadryyy using disablePortal on the select component worked a treat.

In my case, i was receiving that error when focusing a select component inside a focus trapped form, not using a dialog component as a container, instead a straight forward portal.

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

[MPragya-20]

disableEnforceFocus worked...thanksss

[kauffmanes]

disableEnforceFocus also works for me, but I'm concerned about using it...doesn't it cause accessibility issues with a screen reader? I'm assuming if this is happening, and someone using a SR is on the page, then it's going to jump back and forth between the select and the dialog. I'm thinking @jameswlale has the right idea - disable the select so it can't jump to focus there.