Modal called from another modal - Maximum call stack size exceeded

[arunchris]

On opening an modal form from anothe modal form, form fields inside the second modal form are not selectable.

console throws the following error
carbon-components.js:2282 Uncaught RangeError: Maximum call stack size exceeded.
at HTMLDocument.Modal._this._handleFocusin (carbon-components.js:2282)

https://codepen.io/arunchris/pen/ddZREL

[asudoh]

@carbon-design-system/design Wondering if we should allow "stacked modal" - This often comes up as a developer to address several use cases, but I think people knows the feeling as a user when she sees a dozen of stacked modals. Great to have designers' point of view - Thanks!

[tw15egan]

Initial reaction is this shouldn't be supported, as I don't see when you would need to trigger another modal when you are currently in the context of a modal. Seems like a UX question, but if this is a pattern we want to allow we can make changes to support it. Do you have any design documentation explaining this workflow to help us get a better grasp on why you need a modal inside a modal?

[tay-aitken]

I agree with TJ, I don't think a modal on top of a modal is a good experience. Seconding his request for an example of the UX flow and what you are trying to accomplish.

[SpencerReynolds18]

As a random third party who previously did UX work on improving modal interactions on our platform, we should do everything we can to avoid modal on modal situations. If you need that much complexity it should be handled elsewhere such as a page.

[arunchris]

Thanks for your inputs team.
I was able to get a workaround by hiding the first modal. https://codepen.io/arunchris/pen/JpOreN
But I will advise our team to avoid using modal on modal.

[tay-aitken]

Context wise I would recommend making it look like a two-step process/flow as opposed to closing one modal to open another.

[happyshubham]

@arunchris I tried the changes suggested by you but it didn't work for me, maybe because the library would have changed considerably since you put the comment.

Hovever I found another tweak to resolve this problem. So instead of hiding the first modal, I simply remove the tabindex attribute from it while the second modal is being opened and then add it back while the second one is getting closed.