ClickOutsideToClose when using Component

[asoyfer]

Hi Trey,

Thanks for extending this module to work with components!

I noticed that ClickOutsideToClose does not work if the item is a component. It looks like that's because the div with the .ril-current-image class is not receiving a width when the child is not an image and as a result is taking up 100%, preventing the user from clicking outside the media visible to close the Lightbox. You can see an example of this in your demo, when viewing the YT iframe slide.

Would it be possible to fix this by automatically detecting the width of the child component's parent element or somehow passing it in when the child is not an image?

I guess the alternative would be to set some width smaller than 100% on the class in CSS to always have some room around the media.

Thanks,
Anatoly

[David-Richter]

Hi asoyfer,
just stumbled over the same bug.
An easy scss-only solution (that works for me) might be:

.ril-image-current {
    pointer-events: none

    .gatsby-image-wrapper {
        pointer-events: all
    }
}

So the .ril-image-current does not accept any pointer-events and the "background" gets clicked.
The image has to accept all pointer-events, so it does not close on a click on the image.

Maybe this works for you, too (if you still need it).

Best,
David

[DeekshaPandit]

@David-Richter , this scss fix does not work for me