Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click on underlay closes multiple modals #88

Open
wwahammy opened this issue Apr 24, 2019 · 4 comments
Open

Click on underlay closes multiple modals #88

wwahammy opened this issue Apr 24, 2019 · 4 comments

Comments

@wwahammy
Copy link

When underlayClickExits is true, clicking on the underlay around a modal will close the modal. This works perfectly when there's a single modal.

On the other hand, this works a little unexpectedly when there are multiple modals. In that case, if you have a modal and create a second modal and they both have underlayClickExits set to true, one would expect only the second modal to close when you click the underlay. If you click the underlay though in an area outside of both modals, then BOTH modals will close. I don't think this is the expected behavior.

Ideally, I think the modals should know when they're NOT the top most modal and add that being the top most modal as a condition in the checkUnderlayClick function.

I don't know if such a change would be backwards compatible but it's a feature I would find useful.

@spencersteers
Copy link

Ran into this same issue. I did a little investigating and something I noticed is that if you render the second <AriaModal /> outside of the first then clicking the underlay exits in the order you would expect.

@mattconvente
Copy link

@spencersteers Also encountering this bug. When you say "render outside of the first," what specifically do you mean? Mounting the second modal to a container other than <body> using AriaModal.renderTo? Because I needed a quick fix, I ended up setting underlayClickExits to false and just accepted the loss of that behavior, but it's not optimal.

@spencersteers
Copy link

@mattconvente I believe I had an <AriaModal /> that had a child <AriaModal /> which was conditionally rendered — but it was a long time ago so I'm not exactly sure if that is what I meant.

@mikemklee
Copy link

Is there a way to work around this besides refactoring the multiple modals to be rendered independent of each other?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants