Maximum call stack size exceeded on focusTrap.tryFocus

#####################################

this is the console.log of loop lines in order.

#####################################

material-components-web.js:7460 focusTrap.checkFocusIn => tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()) :

null

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​

material-components-web.js:7514 focusTrap.tryFocus => node.focus() :

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:6626 focusTrap.tryFocus => node.focus() :

<input type=​"text" class=​"mdc-text-field__input" id=​"username-input" name=​"username">​

material-components-web.js:6626 focusTrap.tryFocus => node.focus() :

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:6626 focusTrap.tryFocus => node.focus() :

<input type=​"text" class=​"mdc-text-field__input" id=​"username-input" name=​"username">​

material-components-web.js:7460 focusTrap.checkFocusIn => tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()) :

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:7514 focusTrap.tryFocus => node.focus() :

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:6571 focusTrap.checkFocusIn => tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()) :

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​

​ <input type=​"text" class=​"mdc-text-field__input" id=​"username-input" name=​"username">​

material-components-web.js:6626 focusTrap.tryFocus => node.focus() :

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:6571 focusTrap.checkFocusIn => tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()) :

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

<input type=​"text" class=​"mdc-text-field__input" id=​"username-input" name=​"username">​

material-components-web.js:7460 focusTrap.checkFocusIn => tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()) :

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

<a class=​"mdc-list-item mdc-list-item–activated" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

material-components-web.js:7514 focusTrap.tryFocus => node.focus() :

<a class=​"mdc-list-item" href=​"#" aria-selected=​"true" tabindex=​"0">​…​​

… …

#################################################

this is the console error Maximum call stack size exceeded.

Order is from bottom to the top

#################################################

material-components-web.js:7514 Uncaught RangeError: Maximum call stack size exceeded. at tryFocus (material-components-web.js:7514) at HTMLDocument.checkFocusIn (material-components-web.js:7460) at tryFocus (material-components-web.js:6625) at HTMLDocument.checkFocusIn (material-components-web.js:6571) at tryFocus (material-components-web.js:7514) at HTMLDocument.checkFocusIn (material-components-web.js:7460) at tryFocus (material-components-web.js:6625) at HTMLDocument.checkFocusIn (material-components-web.js:6571) at tryFocus (material-components-web.js:7514) at HTMLDocument.checkFocusIn (material-components-web.js:7460) tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 checkFocusIn @ material-components-web.js:6571 tryFocus @ material-components-web.js:7514 checkFocusIn @ material-components-web.js:7460 tryFocus @ material-components-web.js:6625 (anonymous) @ material-components-web.js:6488 setTimeout (async) delay @ material-components-web.js:6650 addListeners @ material-components-web.js:6487 activate @ material-components-web.js:6431 trapFocus @ material-components-web.js:14151 (anonymous) @ material-components-web.js:14399 setTimeout (async) (anonymous) @ material-components-web.js:14397 setTimeout (async) (anonymous) @ material-components-web.js:14606 requestAnimationFrame (async) runNextAnimationFrame_ @ material-components-web.js:14603 open @ material-components-web.js:14391 open @ material-components-web.js:14112 ###################################################### window.tools.ui.notifications.dialogs.open @ notifications.js:308

==> ## opening login form dialog and closing the drawer

###################################################### window.tools.current.on @ index.js:498 foreach @ tools.js:1423 foreach @ tools.js:169 _foreach @ tools.js:1299 foreach @ tools.js:1303 foreach @ tools.js:1420 (anonymous function) @ tools.js:1341 ############################################ window.main.login.link.addEventListener @ index.js:509

==> ## click on drawer link to open the login dialog

############################################

############################################

I think, this problem happend because the browser’s autofocusing login user form when modal is openning. Good luck

############################################

[mcsonka-cxn]

I can confirm that the issue is still reproducible. Two modals opened at the same time gives an error in the console.

[kfranqueiro]

Thanks for this report! It sounds then like this happens in cases where you’re opening a modal from another modal.

Does it happen if you close the modal drawer before opening the dialog?