closeOnBackdropClick works on backdrop to the left and right of image, but not above and below image

Not sure if #313 would fix this—I’m not able to look closely at it right now.

Steps to reproduce the behavior:

Tested on Chrome with npm versions 1.1.0-beta.3, 1.1.0-beta.2, and 1.0.0. Also tested 1.1.0-beta.3 on Firefox and Safari. Here’s my JSX:

{/* Lightbox gallery */}
<ModalGateway>
  {lightboxOpen && (
    <Modal
      onClose={toggleLightbox}
      allowFullscreen={false}
      closeOnBackdropClick={true}
    >
      <Carousel
        currentIndex={lightboxIndex}
        views={photoSources}
      />
    </Modal>
  )}
</ModalGateway>

My state and toggle function:

// Lightbox gallery
const [lightboxIndex, setLightboxIndex] = useState(0);
const [lightboxOpen, setLightboxOpen] = useState(false);
const toggleLightbox = index => {
  setLightboxIndex(index);
  setLightboxOpen(!lightboxOpen);
};

Expected behavior:

Clicks on the backdrop on all sides of the image ought to close the modal.

Actual behavior:

Only backdrop clicks to the right and left of the image close the modal, not backdrop clicks above and below the image.

[lsnryszardb]

This worked for me as a temporary fix:

.react-images__view {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

[durdevic]

Okay, so following the “Can you check if this is still present in 1.1.4?” comment I updated to 1.1.4, and it was breaking, but now I saw that the latest version is 1.1.6. There it works perfectly! 😁

Awesome job mate! Super quick fixing 💪

Thanks!