search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.29k stars 708 forks source link

Carousel component stops working when navigating back to page in Astro with View Transitions #864

Open JoyBoy-369 opened 2 months ago

JoyBoy-369 commented 2 months ago

Describe the bug I am using the carousel component in my Astro project with View transition and all works fine on the first page load. When I navigate to another page and back to this page, the carousel does not work. I see the messages fired by OnChange event , as I put it on cycle. However, on looking at the HTML the elements remain hidden and I see no change.

To Reproduce Steps to reproduce the behavior:

  1. Use the carousel component in any page
  2. Navigate to another page and back
  3. The carousel component is not shown

Expected behavior The carousel component should work the same as on the first page load as on subsequent page loads

Screenshots First page load

Screenshot 2024-04-22 at 8 06 39 PM

Navigating to another page and back

Screenshot 2024-04-22 at 8 06 57 PM

Desktop (please complete the following information):

Additional context

adoallo commented 3 weeks ago

I'm having the same problem. Did you manage to solve it?

DiabeticOwl commented 2 days ago

Are you using ViewTransitions from Astro? In my project it seems to be breaking the JS behind the Carousel component.

When I remove the <ViewTransitions /> tag the component works as expected.

Flowbite team, is there any work around to establish compatibility between ViewTransitions and the Carousel component?

JoyBoy-369 commented 1 day ago

@adoallo @DiabeticOwl I was able to do it using the flowbite react carousel component. The basic gist of what is happening is that there has to be a way to unmount/ destroy the carousel instance on navigating away and remount it when navigating back. However, the js version doesn't seem to have such a way. It can obviously be extended by adding the code yourself. However, due to time constraint I used the react carousel component. It's basically the same way you would add any astro island. I would suggest to build the carousel yourself or find a library that actually exposes an API to create and destroy the carousel. You can then destroy it on say a page swap and create it on page load astro events. Hope this helps!

DiabeticOwl commented 1 day ago

Greetings @JoyBoy-369, yes. I have concluded on taking the same approach of implementing the react component as an island. I used the ui.shadcn component.

Wanted to expressed what I noticed with the ViewTransitions tag to raise the flag. Thank you for your feedback.