Uncaught RangeError in Blink and WebKit browsers

I have a setup where I open a modal and then want to step from the currently open modal to the next one. From the second modal I want to go to either the previous modal, or the next one, and so on.

The pseudo-code of the buttons inside the modal that enable this behavior:

Modal 1

<button data-a11y-dialog-hide="modal-1" data-a11y-dialog-show="dialog-2" >next modal</button>

Modal 2

<button data-a11y-dialog-hide="dialog-2" data-a11y-dialog-show="dialog-1">prev modal</button>
<button data-a11y-dialog-hide="dialog-2" data-a11y-dialog-show="dialog-3" >next modal</button>

… and so on.

Now, when I click on the “next” button in the first modal, everything works as expected, the modal 1 hides and modal 2 shows up. In fact, the “next” button of all modals works just fine.

But when I click on the “prev” button e.g. in the second modal, to go back to the first modal, I get the following error in Chrome, Opera, and Safari (aka. Blink and WebKit browsers):

Uncaught RangeError: Maximum call stack size exceeded.

Test scenario: http://jsbin.com/bumimohexi/1/edit?html,js,output

What is causing this and how can I avoid it?

[KittyGiraudel]

Hello there. I’ll have a look soon.

[KittyGiraudel]

Cheers. 😃