Lightbox close toggler state not properly updating

[exitsimulation]

Hello!

What's the intended behaviour when closing the lightbox? I thought fslightbox would take care about the toggler state on close, however this seems not to be the case? I then tried to flipping the toggle state in the onClose callback, however, this leads to the lightbox opening again immediately and only after a second close the lightbox closes successfully.

What is the best way to implement the closing behaviour properly? Thanks

const [lightboxOpen, setLightboxOpen] = useState(false);

[...]

{image_slider && imagesLightbox && (
          <FsLightbox
            toggler={lightboxOpen}
            sources={imagesLightbox}
            onClose={() => {
              setLightboxOpen(false);
            }}
          />
        )}```

[MariuszRogowicz]

same problem here - The toggler does not update the shutdown state on its own, but only the change. When we try to override this with the onClose event, the component rerender again.

[exitsimulation]

@banthagroup Any info on what would be the best approach here? Thanks

[deepkmal]

I'm running into the same problem as well - any info on how to proceed would be greatly appreciated

[PapaLimaZulu]

The workaround:

In setUpLightboxUpdater (1/c/main-component/updating)

replace

if (previousProps.toggler !== currentProps.toggler) {

with

if (currentProps.toggler && previousProps.toggler !== currentProps.toggler) {

[27leaves]

I got it (for all who are as confused as I am). This toggle state is really a toggle and not a "is visible" flag. So, everytime you change the toggler it will open the view. That's why onClose={() => {setLightboxOpen(false); }} will open the view again and seems broken. It's a bit of a confusing API, but as soon as you got it it works.

So the solution is not to do anything onClose, but have it like this:

const [lightboxToggle, setLightboxToggle] = useState(false);

[...]
const openLightbox = () => {
   setLightboxToggle(!lightboxToggle);
}

{image_slider && imagesLightbox && (
          <FsLightbox
            toggler={lightboxToggle}
            sources={imagesLightbox}
            //onClose={() => {
            //  setLightboxOpen(false);
            //}}
          />
        )}

[deshabhishek007]

Thanks @27leaves it worked.

I got it (for all who are as confused as I am). This toggle state is really a toggle and not a "is visible" flag. So, everytime you change the toggler it will open the view. That's why onClose={() => {setLightboxOpen(false); }} will open the view again and seems broken. It's a bit of a confusing API, but as soon as you got it it works.

So the solution is not to do anything onClose, but have it like this:

const [lightboxToggle, setLightboxToggle] = useState(false);

[...]
const openLightbox = () => {
   setLightboxToggle(!lightboxToggle);
}

{image_slider && imagesLightbox && (
          <FsLightbox
            toggler={lightboxToggle}
            sources={imagesLightbox}
            //onClose={() => {
            //  setLightboxOpen(false);
            //}}
          />
        )}

[Mrrvm]

Hello!

I have a similar problem, I have implemented exactly what is here and works, but when I try to open the lightbox for the second time, it won't work anymore, because the toggler value does not get updated. Any ideas? Thank you.