Nextjs server components with carousel as child client component does not work on first render

[rubenstolk]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Create a simple nextjs app having a main page (server component) with a child element that is "use client" and renders a simple Carousel
2. Try to navigate the carousel, everything seems to work except the scrolling of the items, so visibly it looks like the carousel doesn't work at all

Current behavior

No scroll of the carousel visible at first render, when browsing to another page and coming back to the page with the carousel, it suddenly works fine.

Expected behavior

Should scroll

[pochka15]

I could reproduce it in a cloned repository by opening the http://localhost:3000/docs/components/carousel

I've also tried to find there the bug is and looks like it's in this line of code:

  const navigateTo = useCallback(
    (item: number) => () => {
      if (!items) return;
      item = (item + items.length) % items.length;
      if (carouselContainer.current) {
        
        // -------------------------------- HERE --------------------------------
        carouselContainer.current.scrollLeft = carouselContainer.current.clientWidth * item;
        
        
      }
      setActiveItem(item);
    },
    [items],
  );

But I don't understand what magic is happening behind the scenes. Indeed when we set scrollLeft to any value it has no effect until we jump to another page and get back 🤷‍♂️

[pochka15]

Okay, I've found the problem, it's in the overflow-x: hidden. Looks like it should be set to scroll as it's stated on the MDN but I still don't understand why it works after jumping between pages

Overflow.x.mp4

[pochka15]

In some sense showing scrollbars does the job (but you'll see a scrollbar :) ). Styles are a bit broken here

Hide.scrollbars.mp4

[vdwalia]

Any update on this ?

[rluders]

@vdwalia give it a try: https://www.npmjs.com/package/flowbite-react/v/0.7.0-beta.3

[vdwalia]

@vdwalia give it a try: https://www.npmjs.com/package/flowbite-react/v/0.7.0-beta.3

Nope that doesn't work
Although this is what i have tried and it worked on chrome as well as in firefox

"use client";

import "./globals.css";
import {Carousel} from "flowbite-react";
import {useState} from "react";

export default function Home() {
    const [isHide, setIsHide] = useState(true);
    setTimeout(() => setIsHide(false), 1000);
    return (
        <div className="px-4 pt-6">
            <div className="h-72 w-full">
                {!isHide ? (
                    <Carousel>
                        <img
                            alt="banner-1"
                            src="/images/homepage_slider_images/banner1.webp"
                        />
                        <img
                            alt="banner-2"
                            src="/images/homepage_slider_images/banner2.webp"
                        />
                        <img
                            alt="banner-3"
                            src="/images/homepage_slider_images/banner3.webp"
                        />
                        <img
                            alt="banner-4"
                            src="/banner4.webp"
                        />
                    </Carousel>
                ) : null}
            </div>
        </div>
    );
}

But i don't think this patch is the stable solution.
Also is there any way we can set number of items per slide ? i did tried to changing styles from here src/flowbite-theme.ts and it works with items styles but that isn't responsive and indicator isn't working accordingly so is it possible for us to add one more prop to existing Carousel component ?

[pochka15]

Any update on this ?

I've personally fixed the problem by adding some CSS

 <Carousel  className={styles.hackChild} >
      {children}
    </Carousel>

.hackChild > :first-child {
  overflow: auto;
}

@vdwalia

[vdwalia]

Any update on this ?

I've personally fixed the problem by adding some CSS

 <Carousel  className={styles.hackChild} >
      {children}
    </Carousel>

.hackChild > :first-child {
  overflow: auto;
}

@vdwalia

It worked with chrome and firefox, thx alot for that but having issue in safari, i can see vertical and horizontal scroll bars. I guess we are 90% there...

[joornby]

Okay, I've found the problem, it's in the overflow-x: hidden. Looks like it should be set to scroll as it's stated on the MDN but I still don't understand why it works after jumping between pages

Looking at the CSS inheritance tree, the react-indiana-drag-scroll library specifies the overflow to be hidden when you hide the scroll bars, which had a higher css specificity. I already was using a custom theme, so I changed the scroll container class to be !overflow-x-scroll which overrides the specificity and it seems to work now.