Dynamic DOM slide issue?

[remy90]

This may not be a bug but I've not managed to find a reason why only one conditional slide works.

Carousel.mov

My use case is:
I have a list of slides. Some have prerequisites based on answers from previous slides. This is relevant because it changes the number of slides in the carousel. As the video shows, the answer from the first slide adds a slide before the 'was?' slide, however, an answer to the 'was?' slide doesn't show the final slide, ('Quoi?) despite it being in the DOM. canScrollNext() is also false.

The closest discussion was: #324 , where I discovered emblaApi?.reInit();. I can confirm reInit() works only once (in this case being able to scroll to 'was?', after the first hidden slide is added to the DOM).

Here is some of the relevant code for rerendering the DOM elements:

  const latestItems = useMemo(() => {
    const itemsToAdd = getLatestItemList(questionSet, filteredItems, prerequisiteItems);
    emblaApi?.reInit();
   console.log('canScrollNext', emblaApi?.canScrollNext()); // <--- false despite second hidden element being enabled
    return itemsToAdd;
  }, [questionSet, filteredItems, prerequisiteItems, emblaApi]);

The next button onClick simply uses the example from a template:

  const scrollNext = useCallback(
    () => {
      return emblaApi && emblaApi.scrollNext();
    },
    [emblaApi],
  );

[remy90]

This was simply an ordering issue. Latest items were not updated by the time reInit() was called. Still not sure why it worked at all but moving the reinit into the next button click resolved my issue:

  const handleNextClick = () => {
    emblaApi?.reInit();
    scrollNext();
  };

Many thanks for this package David 🙏

[davidjerleke]

Hi @remy90, I’m glad you got it sorted. The reInit function doesn’t behave differently from one call to another so when these kind of problems occur it’s usually a race condition or wrong order of things.

Cheers,
David