Dropdown and Multiselect: ERROR TypeError: value.trim is not a function

[aleadkeyhole]

Describe the bug

Upgraded this morning, upon clicking a dropdown or multiselect specifically this error occurs. Appears that the trim() function is being called upon something else then a string.

Environment

irrelevant

Reproducer

No response

Angular version

15.1.0

PrimeNG version

15.1.0

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

v18.12.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[NahiaLC]

Same problem here!

Angular v15.1.1
PrimeNG v15.1.0
Node v16.15.1

[adglow-izemfr]

same problem here!

Angular v15.1.1
primeng v15.1.0
Node v18.13.0

[hugograf]

It is maybe Angular bug, see ngClass klass property

[pkozlowski-opensource]

It is maybe Angular bug, see angular/angular#48779

Actually, the issue is that the overlay implementation is supplying an empty object ({}) to a binding that accepts strings only. The offending line seems to be https://github.com/primefaces/primeng/blob/master/src/app/components/overlay/overlay.ts#L117

So this is rather a bug that should be fixed on the PrimeNG side.

[olegkap]

I am experiencing the same issue after upgrade to 15.1

[PetrJajtner]

I think there is a problem with line _styleClass: string | undefined; (https://github.com/primefaces/primeng/blob/master/src/app/components/overlay/overlay.ts#L233) and invoking styleClass property. It is evaluated using ObjectUtils.merge where both parameters are undefined and therefore result of this method is empty object.
One possible solution is inserting them into the array and joining by space directly in getter:

get styleClass(): string {
  return [this._styleClass ?? '', (this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass) ?? ''].join(' ').trim();
}

[AlejandroMHOB]

Same problem here. After update to primeng 15.1 with latest Angular version.

[cancrexo]

Same here.
ng 15.05
node 18.12
primeNG 15.1.0

Simple clicking on the dropdown throws error on console

[Phillip9587]

Reproduction on Stackblitz: https://stackblitz.com/edit/primeng-dropdown-demo-gbr32c?file=src/app/app.component.html

[olegkap]

Looks like the issue with Angular, like someone mentioned, I rolled back Angular to 15.1.0 and kept primeNG at 5.1.0 and all worked, so I think we need to test it once Angular 15.1.2 comes out perhaps.

[PetrJajtner]

Nope, @olegkap , Angular 15 only simplified the setter named klass. The problem is in PrimeNG (see my comment above) which produced object instead of string. Btw. PrimeNG uses very ugly code with many types of any. I would recommend core team of PrimeNG to use strict type checking.

[olegkap]

I figured that what fixed it for me after I rolled back some changes so I thought it might be Angular 15.1.1.
I do agree some of the code in PrimeNG would be good to refactor when it comes to types.
I guess will wait then for PrimeNG 15.1.1

[yghandor]

it works with Version 15.1.0 and latest primeng (15.1.0)
and this is by just remove the "^"

[PetrJajtner]

it works with Version 15.1.0 and latest primeng (15.1.0) and this is by just remove the "^"

I don't think so, @yghandor, try my project: https://stackblitz.com/edit/pj-angular-ngclass-setting-bug?file=package.json

[mertsincan]

Thanks a lot for the report! Fixed now.

[klanglie]

I feel that this is not fixed. I am running latest angular, 15.2.8 and the latest PrimeNG, 15.4.1. Before updating, my project worked fine. It seems like it is PrimeNG and NOT Angular that is still the cause for this. I wish I could pinpoint further but have tried to debug and handle the error without any success so far.

[sbkt007]

My issue got resolved after updating the angular and primeng same version. I was installed angular 15.0.0 and primeng 15.0.0. Updated both the version to 15.2.1 it got resolved.

[abiram9291]

It is maybe Angular bug, see angular/angular#48779

Actually, the issue is that the overlay implementation is supplying an empty object ({}) to a binding that accepts strings only. The offending line seems to be https://github.com/primefaces/primeng/blob/master/src/app/components/overlay/overlay.ts#L117

So this is rather a bug that should be fixed on the PrimeNG sid

[abiram9291]

has this been fixed at all?
I am still facing this issue. any help is appreciated.

[bananalasmari]

same issue here any fixes?!

"@angular": "^15.0.0",
"primeng": "^15.0.0",

UPDATE: The issue fixed by updating both 15.2.0 version