Bug: React Carousel ruins the scroll position on every state change

[TamirCode]

Description

React Carousel bug It seems to me that on every state change, onInit is triggered, and then the scroll position jumps to somewhere on the page The scroll remains if you click the change state button when u are at the very bottom of the page or the very top of the page. The useEffect correctly runs once. Maybe something to do with prevScrollPosition in detail instance.

Steps to reproduce

when I click the button it hijacks my scroll position and this makes using other states impossible https://codesandbox.io/p/sandbox/lightbox-carousel-bug-rj3tnq App.tsx

import { useState } from "react"
import Carousel from "./Carousel"
import "./styles.css"

export default function App() {
    const [myState, setMyState] = useState(false)

    return (
        <div>
            <div style={{ height: "100vh" }}>long div 1</div>

            <Carousel />

            <div style={{ height: "100vh" }}>long div 2</div>

            <button onClick={() => setMyState((prev) => !prev)}>CLICK ME</button>

            <div style={{ height: "150vh" }}>long div 3</div>
        </div>
    )
}

Carousel.tsx

import { useCallback, useEffect, useRef, useState } from "react"

import LightGallery from "lightgallery/react"
import lgThumbnail from "lightgallery/plugins/thumbnail"
import lgZoom from "lightgallery/plugins/zoom"
import { InitDetail } from "lightgallery/lg-events"

import "./styles.css"
import "lightgallery/css/lightgallery.css"
import "lightgallery/css/lg-thumbnail.css"
import "lightgallery/css/lg-zoom.css"

export default function Carousel() {
    const containerRef = useRef<any>(null)
    const [galleryContainer, setGalleryContainer] = useState("a")

    const onInit = useCallback((detail: InitDetail) => {
        if (detail) {
            detail.instance.openGallery()
            console.log("intance ran")
        }
    }, [])

    useEffect(() => {
        console.log("use effect ran")
        if (containerRef.current) {
            setGalleryContainer("e")
        }
    }, [])

    return (
        <>
            <div className="GalleryCarousel" ref={containerRef}></div>
            <LightGallery
                container={containerRef.current}
                onInit={onInit}
                plugins={[lgZoom, lgThumbnail]}
                closable={false}
                dynamic={true}
                dynamicEl={[
                    {
                        src: "https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630",
                        responsive: "https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630",
                        thumb: "https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630",
                        subHtml: `
                                    <p style="font-size: 15px;">
                                        caption for image 1
                                    </p>`,
                    },
                    {
                        src: "https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
                        responsive: "https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
                        thumb: "https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
                        subHtml: `
                                    <p style="font-size: 15px;">
                                        caption for image 2
                                    </p>`,
                    },
                ]}
            ></LightGallery>
        </>
    )
}

styles.css

.GalleryCarousel {
    height: 470px;
    border: 3px solid red;
}

Environment

• Browser and version - tested on chrome and firefox
• OS - windows 10
• lightGallery version - 2.7.2

Additional context

Unrelated side note - there is also the bug which the carousel flashes open and closes fullscreen when the page mounts. I have temporary work around for it (not in the sandbox) but its also bad

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[TamirCode]

e

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.