How to prevent clicks on background modals?

[willadamskeane]

Hey there,

I have a stack of modals with different sizes. I'd like to prevent clicks on modals that are not currently active, such that clicking on a modal in the background would trigger a background press and close the active modal. Just adding pointerEvents="none" should work, but I don't think this is currently an option.

Let me know, Thanks!

[CharlesMangwa]

hey @willadamskeane! i don't think i understood your question correctly: the current active modal's backdrop should be over all the inactive modals. that way, by pressing a modal behind the backdrop, you should get the expected behavior: the active modal closing. if i didn't get it right, feel free to provide a repro on snack or a video if possible!

otherwise, one approach would be to wrap all your modals in a regular <div> and have a pointerEvents="none" that would be applied depending on what's the currentModal. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove that pointerEvents="none".

[willadamskeane]

hey @willadamskeane! i don't think i understood your question correctly: the current active modal's backdrop should be over all the inactive modals. that way, by pressing a modal behind the backdrop, you should get the expected behavior: the active modal closing. if i didn't get it right, feel free to provide a repro on snack or a video if possible!

otherwise, one approach would be to wrap all your modals in a regular <div> and have a pointerEvents="none" that would be applied depending on what's the currentModal. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove that pointerEvents="none".

Hey @CharlesMangwa, thanks for getting back to me. Here's a video of the issue I'm seeing: https://www.loom.com/share/dce779ac455c4978886e606cbcde14c0

I should mention this is on web. I can make it work the way you described by manually adding a zIndex to the backdrop component in Chrome dev tools, but there's no way for me to pass a style to the backdrop with the library currently.

[CharlesMangwa]

@willadamskeane thanks for the video! it helped me realized i misunderstood how your ui works! the behaviour you're experiencing is "expected" as: the elements' hierarchy is indeed: current modal > any other modal in the stack > backdrop > your app. that's why the larger modal is still clickable since nothing is preventing it from being clickable plus it's on top of the backdrop.

one short-term solution would be to track the current modal as i proposed in my previous comment:

otherwise, one approach would be to wrap each modal in a regular <div> and have a pointerEvents="none" that would be applied depending on what's the currentModal. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove that pointerEvents="none".

meanwhile, the library could use the help of a new modal option, ie: pointerEventsBehaviour ('auto' | 'none' | 'current-modal-none' | 'current-modal-only'), that would pretty much be doing that.

let me know if that would address your issue!

[willadamskeane]

@CharlesMangwa Yeah, sounds like that modal option would cover our use-case. Thanks!

[CharlesMangwa]

hi @willadamskeane ! thanks for your patience regarding this issue! 🙌 i'm happy to report that the new pointerEventsBehavior option is now available in the latest release (v.3.4.0) 🥳 . i gave it a couple of tries and everything seems to be working as per the updated docs. let me know if it's all good on your side as well now!