search

davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.03k stars 96 forks source link

Click on underlay closes multiple modals #88

Open wwahammy opened 5 years ago

wwahammy commented 5 years ago

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 commented 5 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 weeks ago

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