Nested modals don't close properly via JS api

[dkniffin]

I have an situation where I need to nest modals (I know... nested modals 😱).

In my app, showing the second modal works fine, and it closes properly. However, once it is closed, the first modal won't close.

I found this codepen someone created, which demonstrates this should be possible: https://codepen.io/badfeather/pen/NWbBbYP So I was very confused why it didn't work in my app.

After a bunch of digging, I think I figured out what is happening. In that codepen, the open/close functionality is controlled via the built-in closeTrigger functionality. In my case, I am doing it via MicroModal.close. In devtools, I can see that the event listener is removed from the first modal. I believe it is caused by this line: https://github.com/HongPong/Micromodal/blob/35723741398857305c85bba52fd431cd0f88e8c1/lib/src/index.js#L313

I'm about to try to push back on my designers to see if I can get rid of the nested modal, but I figured I'd report the issue here.

[dkniffin]

Confirmed: I've got a workaround in my situation. I'm changing things so that when a second modal is opened, it closes the first.