Scroll/Drag doesn't work until window is resized

Bug is related to

• The Vanilla JavaScript version
• The React version
• Documentation website
• Other

Embla Carousel version

• v4.2.0

Describe the bug

• When I first populate the carousel with several items, I am unable to use the navigation arrows or to drag through my items.
• When I resize the window to a different size (either larger or smaller), then restore it to its original size, then the arrows and drag functionality works.
• When I log embla (which is set to useEmblaCarousel()) before I do the resizing, the object is not null or undefined.
• I’m still trying to determine whether there are parent styles (in overarching components) causing this issue, but I can’t see anything in these components that would cause the dragging and scrollNext/scrollPrev methods to not work.

CodeSandbox

• Unfortunately, I’m working for a client and am unable to share the full code. However, I scrubbed the important variable names and have the carousel code below. (I’m using styled components.)

const OverflowContainer = styled.div`
    overflow: hidden;
    height: 100%;
    min-width: 80%;
`;

const FlexContainer = styled.div`
    display: flex;
    height: 100%;
    width: 80%;
`;

const Slide = styled.div`
    position: relative;
    flex: 0 0 15%;
    height: 80%;
`;

const PreviousButton = styled.button`
    cursor: pointer;
    background-color: green;
    width: 30px;
    height: 30px;
`;

const NextButton = styled.button`
    cursor: pointer;
    background-color: blue;
    width: 30px;
    height: 30px;
`;

interface Props {
    slides: JSX.Element[];
}

const ExampleCarousel = ({mergedVideos}: Props) => {
    const [carouselRef, embla] = useEmblaCarousel();

    const scrollPrev = useCallback(() => {
        embla && embla.scrollPrev(); // embla evaluates properly here - failure happens in scrollPrev()?
    }, [embla]);
    const scrollNext = useCallback(() => {
        embla && embla.scrollNext(); // embla evaluates properly here - failure happens in scrollNext()?
    }, [embla]);

    const slideVideos = slides.map((m) => <Slide key={m.key}>{m}</Slide>);

    return (
        <>
            <OverflowContainer ref={carouselRef}>
                <FlexContainer>{slideVideos}</FlexContainer>
            </OverflowContainer>
            <PreviousButton onClick={scrollPrev} />
            <NextButton onClick={scrollNext} />
        </>
    );
};

export default ExampleCarousel;

Steps to reproduce

1. Populate the carousel with enough items to merit scrolling
2. Clicking the navigation buttons will not do anything.
3. Dragging the carousel items to scroll will not do anything.
4. Resize the window and then put it back to its original size.
5. You should be able to use the navigation buttons and drag to scroll.

Expected behavior

• I expect the scrolling behaviors to work immediately, and not after resizing my window.

Thank you! Let me know if there’s anything else I can provide… If this weren’t a client project, I would have gifs and other accompanying pieces for you. 😦 Apart from this strange issue, I’ve loved using Embla so far!

[davidjerleke]

Thanks for confirming @ej-mitchell 👍. Enjoy!

[ej-mitchell]

It worked 😻 thank you! (I had a hunch that it was scenario 1)