onClose, Carousel index jumps back to "currentIndex" defined in prop

[ndimatteo]

Steps to reproduce the behavior:
I'm explicitly defining the currentIndex based on state so that when an image is clicked it opens at that index. However, if you navigate to other images from the Modal and then close the Modal it "jumps" the index back to the one set from the state when initially opened, causing a brief image swap while the Modal fades out.

Expected behavior:
The index of the Carousel to remain the same onClose

Actual behavior:
Index "jumps" onClose, showing wrong image during modal closing animation.

[ndimatteo]

Any chance you have some input on this @jossmac ? Would love to know what is going wrong here!

[ndimatteo]

bump...

[linxianxi]

I avoided the problem in this way

.react-images__positioner {
    transition: none !important;
  }

// if you used styled-components

const GlobalStyle = createGlobalStyle`
  .react-images__positioner {
    transition: none !important;
  }
`;

<>
  <GlobalStyle />
  <ModalGateway>
     ......
  </ModalGateway>
</>

[Abrikosa1]

.react-images__positioner {
transition: none !important;
}

Helped for me.

Else we can change currentIndex when navigate between images with onViewChange prop

const [currentIndex, setCurrentIndex] = useState(0);
...
<Carousel
 views={images}
 currentIndex={currentIndex}
 trackProps={{
   onViewChange: (index) => {
     setCurrentIndex(index);
   },
 }}
/>