Dialog with full screen image gallery

[avremel]

I have a Dialog with modal={true}. Within Dialog.Content a user can click on an image thumbnail and view a Lightbox (I'm using this library).

The actions are blocked because the Lightbox element is rendered in a Portal and all pointer events outside the Dialog are blocked.

If I set modal={false}, the pointer events are accessible, but scroll is messed up.

I'm overriding the css declaration on body:

body.allow-pointer-events {
  pointer-events: auto !important;
}

Is there a better workaround?

[benoitgrelard]

Hey @avremel,

Can you provide a codesandbox for us to take a look at?

[avremel]

@benoitgrelard

Here is a demo: https://codesandbox.io/s/lucid-frost-6ciw0z?file=/App.js

Notice how the previous/next buttons are broken.

Uncomment useEffect to see my fix.

[benoitgrelard]

Thanks for the link.
I see, you're probably going to have issues when mixing multiple dialog libraries.
Ideally, you don't really need the modal part of that image gallery thing, but rather just the image carousel itself.

Regardless, if you don't have that kind of control, rather than resetting the pointer-events on the body which would likely mess with some of our handling, it would be safer to target that lightbox container and enable pointer-events on that instead.

Playing around in the sandbox, just adding this to your CSS does it:

.ReactModalPortal {
  pointer-events: auto;
}