Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Uncaught RangeError: Maximum call stack size exceeded. Stacked overlays with focusable elements

See original GitHub issue

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

An Ionic component with an overlay and a focusable element opens another Ionic component with an overlay and a focusable element. Infinite loop occurs (trapkeyboardFocus leads to focus on a descendant, causing focus event handler to spawn the same behaviour):

Uncaught RangeError: Maximum call stack size exceeded.
    at focusElement (helpers-eed79a2b.js:158)
    at focusFirstDescendant (overlays-5f2f4ffc.js:4090)
    at trapShadowFocus (overlays-5f2f4ffc.js:4230)
    at trapKeyboardFocus (overlays-5f2f4ffc.js:4247)
    at HTMLDocument.<anonymous> (overlays-5f2f4ffc.js:4256)
    at ZoneDelegate.invokeTask (zone.js:434)
    at Zone.runTask (zone.js:205)
    at ZoneTask.invokeTask [as invoke] (zone.js:516)
    at invokeTask (zone.js:1656)
    at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1725)

Expected Behavior

No infinite loop that causes call stack size to be exceeded.

Steps to Reproduce

ionic start Angular project
choose menu template
make menu have an overlay by removing the split pane in the template’s app component’s HTML
create a modal with a button inside of it
make an ion-item as a button in the menu present the modal

Code Reproduction URL

https://github.com/CFT-Chris/trapKeyboardFocusBug

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (/home/chris/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (/home/chris/.nvm/versions/node/v16.13.1/bin/node)
   npm    : 8.1.2
   OS     : Linux 5.13

Additional Information

This was already logged here but was closed due to inactivity: https://github.com/ionic-team/ionic-framework/issues/23655

Issue Analytics

State:
Created 2 years ago
Reactions:10
Comments:17 (7 by maintainers)

Top GitHub Comments

7reactions

guidopontetcommented, Jan 5, 2022

Same problem, any update?

5reactions

thameurrcommented, Dec 27, 2021

same problem here any update ?

Top Results From Across the Web

javascript - Maximum call stack size exceeded error

It means that somewhere in your code, you are calling a function which in turn calls another function and so forth, until you...

JavaScript Error: Maximum Call Stack Size Exceeded

This error is a RangeError. A RangeError typically means an error has occurred outside of a code's argument value for its parameter. Now...

NetSuite Applications Suite - Access Configuration Properties

Migrating to SuitePromotions · Transactions that Cannot have Stackable Promotions ... or a range error (RangeError: Maximum call stack size exceeded).

Debugging with GDB - sourceware.org

This debugging information is stored in the object file; it describes the data type of each variable or function and the correspondence between...

JavaScript Data Grid Release notes - Handsontable

Now, calls to updateSettings() update a plugin's state only when the options ... and spare rows were causing 'RangeError: Maximum call stack size...