Slide reset issue

Hi,

I’m not sure if this is a bug or not, but there is a weird interaction when rendering the same carousel conditionally in two places.

It might be easier to show than to explain so I’ve created a repro here: https://codesandbox.io/s/embla-carousel-reinit-issue-fgw2d?file=/src/js/EmblaCarousel.js

Steps to reproduce

1. Go to the repro
2. Drag the carousel to go to slide 2.
3. Click on the “swap” button
4. See that the carousel has swapped back to slide 1.

Now if you remove the div on line 49 changing: <div>{renderCarousel()}</div> to just {renderCarousel()} then do the same steps as above, the carousel wont reset back to 0.

I know I can get around this by ensuring that the emblaRef is only ever used once but it popped up in a use case where it is cleaner to have a boolean higher and render the same carousel in two places.

Happy to give me info as required.

[callumbooth]

Hi David,

I don’t mind at all, always happy to look at different approaches.

I ended up getting it working by ensuring that the carousel doesn’t unmount (which was probably more efficient anyway) but the element.requestFullScreen looks really interesting so may see if it is worth refactoring at some point.

I’m going to close this since it never was a bug, I was just curious as to why it was happening which you have very helpfully answered and provided solutions to so thank you.

[davidjerleke]

Hi Callum (@callumbooth),

I’m glad you got it sorted.

Cheers! David