Primeng: Carousel - Invalid Array Length error when array length = 0

[dmitrye]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

ERROR RangeError: Invalid array length
at Carousel.push../node_modules/primeng/components/carousel/carousel.js.Carousel.totalDotsArray (carousel.js:263)
at Object.eval [as updateDirectives] (Carousel.html:35)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:36055)
at checkAndUpdateView (core.js:35067)
at callViewAction (core.js:35433)
at execComponentViewsAction (core.js:35361)
at checkAndUpdateView (core.js:35074)
at callViewAction (core.js:35433)
at execEmbeddedViewsAction (core.js:35390)
at checkAndUpdateView (core.js:35068)

Expected behavior
Should properly handle default item array with 0 length.

Minimal reproduction of the problem with instructions

Issue occurs in components/carousel/carousel.js:263
`
Carousel.prototype.totalDotsArray = function () {
return Array(this.value ? Math.ceil((this.value.length - this._numVisible) / this._numScroll) + 1 : 0).fill(0);
;
};

When this.value = 0 it triggers a -3 array length result instead of 0. this.value = 0 triggers a "true" result instead of false like a Null or Undefined value would.

html: ....
component js:

`export class ...

public items = []

ngOnInit(){
// nothing here related to items
}

ngAfterViewInit(){
// items populated here through service API call
}

`

What is the motivation / use case for changing the behavior? N/A
Please tell us about your environment: N/A

• Angular version: 8.X
• PrimeNG version: 8.1.1
• Browser: Chrome 77
• Language: Typescript | webpack
• Node (for AoT issues): N/A

[sukhminderx]

I resolved this one by this workaround:
getVisibleItems () { return this.socials.length < 4 ? this.socials.length : 4; }
[numVisible]="getVisibleItems()"
This will assign numVisible as 1 or 2 or 3 if the same number of items are present. If the items are >3, the numVisible is assigned for 4

[dmitrye]

I resolved this one by this workaround:
getVisibleItems () { return this.socials.length < 4 ? this.socials.length : 4; }
[numVisible]="getVisibleItems()"
This will assign numVisible as 1 or 2 or 3 if the same number of items are present. If the items are >3, the numVisible is assigned for 4

Thanks for the tip. I'll check to see if that eliminates the error for me as a workaround but the code on my end has not changed since before v8 of Carousel. I upgraded from 8.0.1 to 8.1.1 and it broke. I was trying to address the "nativeElement" error (relatively benign) in 8.0.1 and it caused a bigger issue.

[NandoMuttley]

I solved protecting it with an *ngIf

<p-carousel *ngIf="socials && socials.length > 0"

this prevent wrong calculation before items array is populated.
You can leave numVisible property without function and use const value.

[sukhminderx]

Hi
I found an issue with that. If the length is lesser than the numVisible we face the same issue.
Thanks.

[NandoMuttley]

Thanks for reply, you are right I haven't tested that case. NumVisible computed by function prevent the crash.
There is another little problem, when you add element to items array (i'm using spread sintax) the value returned from getVisibleItems is correct but the carousel visualization is not updated (visibile items remain the previous), I don't know to fix it (force refresh ? ).

[mertsincan]

Fixed now. When the value is an empty array, I think users can decide whether to create the component using *ngIf like; https://github.com/primefaces/primeng/issues/8300#issuecomment-555005872

[jgomesmv]

I'm also facing this issue. When the number of items in the carousel is lower then the number of items we want to show (numVisible) it's thows the error:

RangeError: Invalid array length

The carousel based on it's length should:

• calculate items with based on the numVisible we have set
• if there isn't enough items it should keep the left space empty

[QuentinIcky]

For me the responsiveOptions was the problem. I removed it and it works