Carousel: Broken UI due to Cloned Child Elements with Infinite Scroll - Githubissues

eclipse-tractusx / portal-shared-components

Portal Shared UI Components

https://eclipse-tractusx.github.io/portal-shared-components

Apache License 2.0

1 stars 11 forks source link

Carousel: Broken UI due to Cloned Child Elements with Infinite Scroll #292

Open charmi-v opened 2 weeks ago

charmi-v commented 2 weeks ago

Current Behavior

When the carousel element is rendered with a single child element, multiple clones of that element are rendered. Carousel-bug

Expected Behavior

The carousel element should render with only the single child element and not display navigation arrows. Carousel-fix

Steps To Reproduce

Open src/components/basic/Carousel/Carousel.stories.tsx.
Modify the itemsArray to contain only one element: const itemsArray = [ 'Element 1' ]
Run storybook
Navigate to http://localhost:3006/?path=/story/carousel--carousel.

charmi-v commented 2 weeks ago

The side effects of the cloned issue in carousel can be observed in the linked issue. Once the rendering is updated to prevent cloning, the respective ticket will be resolved directly.

Additionally, the library used for the carousel component, react-slick, has not yet resolved this issue, though workarounds are available.