primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.83k stars 4.5k forks source link

Component: Carousel - circular carousel can cause troubles cloning items #14566

Open ppieczul opened 5 months ago

ppieczul commented 5 months ago

Describe the bug

In a Carousel, when circular carousel is selected, this causes the first and last objects in the carousel to be cloned. I guess this is to enable some animation effects when crossing the circle limit. This can cause problems with the item template that loads and operates on some objects like videos. The objects in the cloned parts will be loaded for the second time and it is not clear which objects are displayed when operating the carousel - the original or the cloned. This makes it impossible to operate reliably on the objects. For example, invoking video play/pause commands on the loaded videos may be directed at wrong objects (duplicated or not, depending which one is displayed). Other problem is that those objects are actually loaded twice, so unnecessary memory consumption results.

Environment

Electron app on MacOS, but this does not matter here.

Reproducer

No response

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

21.5.0

Browser(s)

Chrome

Steps to reproduce the behavior

Create a carousel with a template that displays html video, pass the video object to TS to operate on the video, for example in a (loadeddata) event handler. The handler will be called multiple times for first and last object in the carousel. It won't be clear which video object should stored to later operate on it. Real use case can be - automatically start the video from the beginning when page is changed.

Expected behavior

I think it should not expose the internal implementation details to the behaviour of the application. The item template should be applied once for each carousel item.

maurovargas commented 3 months ago

This happens too when setting autoplayInterval, using PrimeNG 17.9.0 aaa